/* ==========================================================================
   Design Tokens — Light (Default)
   Preference: localStorage nm-theme-preference (light|dark|system)
   html[data-theme]: resolved light|dark only
   Docs: docs/ui-redesign/DESIGN_SYSTEM.md

   Inhaltsverzeichnis (Kaskade beibehalten — Legacy vor nm-*-SaaS):
   1. Tokens Light / Dark
   2. Fonts + Design-System nm-* Basis
   3. Buttons, Animationen, Preloader
   4. Allgemein / Layout Shell
   5. Header, Sidebar, Footer, Hauptbereich
   6. Formulare, Modals, Tabs, Auth
   7. Tabellen, Toasts, Zeiterfassung, Diagramme, Einstellungen
   8. CRM Legacy, WP Legacy, Logs
   9. nm-* SaaS: Avatars/Tasks, CRM, Clients, Customer Detail
   10. Webmaster, Startseite Legacy, Tickets, DSGVO
   11. nm-dash, nm-websites, nm-site-detail
   Audit: docs/ui-redesign/CSS_AUDIT_UNUSED.md | scripts/css-audit/
   ========================================================================== */

:root,
html[data-theme="light"] {
  /* Brand */
  --nm-brand: #fc4f4f;
  --nm-brand-hover: rgba(252, 79, 79, 0.85);
  --nm-accent-2: #ffc800;
  --nm-accent-detail: #f9f871;

  /* Surfaces */
  --nm-surface-page: #f6f8fc;
  --nm-surface-raised: #ffffff;
  --nm-surface-sunken: #eef0f3;
  --nm-surface-overlay: rgba(15, 20, 28, 0.45);
  --nm-surface-chrome: #334357;
  --nm-surface-highlight: #d8dce2;
  --app-page-bg: #f6f8fc;
  --app-surface-bg: #ffffff;
  --nm-dash-card-border: #e7ecf3;
  --nm-dash-card-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --dashboard-card-bg: #ffffff;
  --dashboard-card-border: #e7ecf3;
  --dashboard-card-text: #182230;
  --dashboard-card-muted: #667085;
  --dashboard-card-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --app-header-bg: #f6f8fc;
  --app-header-border: transparent;
  --app-header-text: #182230;
  --app-header-muted: #667085;
  --app-header-control-bg: #ffffff;
  --app-header-control-border: #e6eaf0;
  --app-header-control-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
  --kpi-green: #32c875;
  --kpi-green-soft: #eafaf1;
  --kpi-yellow: #f0b429;
  --kpi-yellow-soft: #fff7df;
  --kpi-pink: #f0448a;
  --kpi-pink-soft: #fff0f6;
  --kpi-blue: #3b82f6;
  --kpi-blue-soft: #edf5ff;
  --kpi-purple: #9b5de5;
  --kpi-purple-soft: #f6efff;
  --quick-action-bg: #ffffff;
  --quick-action-border: #e6eaf0;
  --quick-action-text: #182230;
  --quick-action-icon-bg: #f7f9fc;
  --quick-action-hover-bg: #f8fafc;
  --quick-action-primary-icon-bg: #111c2b;
  --website-stat-total: #32c875;
  --website-stat-total-soft: #eafaf1;
  --website-stat-online: #32c875;
  --website-stat-online-soft: #eafaf1;
  --website-stat-warning: #f0b429;
  --website-stat-warning-soft: #fff7df;
  --website-stat-offline: #fc4f4f;
  --website-stat-offline-soft: #fff0f0;
  --website-stat-maintenance: #8b5cf6;
  --website-stat-maintenance-soft: #f4efff;
  --status-online: #32c875;
  --status-warning: #f0b429;
  --status-offline: #fc4f4f;
  --status-maintenance: #8b5cf6;
  --status-unknown: #98a2b3;
  --table-header-bg: #f8fafc;
  --table-header-text: #475467;
  --table-border: #e7ecf3;

  /* Clients overview */
  --client-card-bg: #ffffff;
  --client-card-border: #e7ecf3;
  --client-card-text: #182230;
  --client-card-muted: #667085;
  --client-card-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --client-table-bg: #ffffff;
  --client-table-header-bg: #f8fafc;
  --client-table-border: #e7ecf3;
  --client-table-text: #182230;
  --client-table-muted: #667085;
  --client-table-hover: #fafbfc;
  --contract-none-bg: #f2f4f7;
  --contract-none-text: #667085;
  --contract-active-bg: #eafaf1;
  --contract-active-text: #168a4b;
  --contract-expiring-bg: #fff7df;
  --contract-expiring-text: #b7791f;
  --contract-expired-bg: #fff0f0;
  --contract-expired-text: #d92d20;
  --client-avatar-0-bg: #e8f1ff;
  --client-avatar-0-text: #3b82f6;
  --client-avatar-1-bg: #f3e8ff;
  --client-avatar-1-text: #8b5cf6;
  --client-avatar-2-bg: #e7f8f0;
  --client-avatar-2-text: #12b76a;
  --client-avatar-3-bg: #ffe8f1;
  --client-avatar-3-text: #f0448a;
  --client-avatar-4-bg: #e6faf8;
  --client-avatar-4-text: #0d9488;
  --client-avatar-5-bg: #fff1e6;
  --client-avatar-5-text: #f79009;
  --customer-detail-card-bg: #ffffff;
  --customer-detail-card-border: #e7ecf3;
  --customer-detail-text: #182230;
  --customer-detail-muted: #667085;
  --customer-detail-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --customer-detail-note-bg: #f4f6f9;
  --customer-detail-note-border: #e7ecf3;

  /* Avatars */
  --avatar-blue-bg: #eaf2ff;
  --avatar-blue-text: #3974d8;
  --avatar-purple-bg: #f2ebff;
  --avatar-purple-text: #7a4dd8;
  --avatar-green-bg: #e8f8f0;
  --avatar-green-text: #21895b;
  --avatar-pink-bg: #fff0f5;
  --avatar-pink-text: #d95683;
  --avatar-orange-bg: #fff2e6;
  --avatar-orange-text: #c66a21;
  --avatar-cyan-bg: #e8f8fa;
  --avatar-cyan-text: #168a98;

  /* Tasks */
  --tasks-card-bg: #ffffff;
  --tasks-card-border: #e7ecf3;
  --tasks-text: #182230;
  --tasks-muted: #667085;
  --tasks-header-bg: #f8fafc;
  --tasks-hover: #fafbfc;
  --tasks-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --tasks-stat-total: #fc4f4f;
  --tasks-stat-open: #f59f00;
  --tasks-stat-progress: #3b82f6;
  --tasks-stat-done: #12b76a;
  --tasks-stat-overdue: #7a5af8;
  --task-tab-text: #667085;
  --task-tab-active: #fc4f4f;
  --task-tab-line: #fc4f4f;
  --task-status-open-bg: #f2f4f7;
  --task-status-open-text: #475467;
  --task-status-progress-bg: #edf5ff;
  --task-status-progress-text: #2563eb;
  --task-status-completed-bg: #eafaf1;
  --task-status-completed-text: #168a4b;
  --task-status-overdue-bg: #fff0f0;
  --task-status-overdue-text: #d92d20;
  --task-prio-high-bg: #fff0f0;
  --task-prio-high-text: #d92d20;
  --task-prio-mid-bg: #fff7df;
  --task-prio-mid-text: #b7791f;
  --task-prio-low-bg: #eafaf1;
  --task-prio-low-text: #168a4b;
  --task-drawer-bg: #ffffff;
  --task-drawer-border: #e7ecf3;
  --task-drawer-text: #182230;
  --task-drawer-muted: #667085;
  --task-reset-bg: #ffffff;
  --task-reset-border: #e7ecf3;
  --task-reset-text: #667085;

  /* CRM Overview */
  --crm-table-bg: #ffffff;
  --crm-table-header-bg: #f8fafc;
  --crm-table-border: #e7ecf3;
  --crm-table-text: #182230;
  --crm-table-muted: #667085;
  --crm-table-hover: #fafbfc;
  --crm-card-bg: #ffffff;
  --crm-card-border: #e7ecf3;
  --crm-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --crm-stat-total: #fc4f4f;
  --crm-stat-company: #3b82f6;
  --crm-stat-person: #12b76a;
  --crm-stat-active: #f59f00;
  --crm-stat-fav: #7a5af8;
  --crm-status-neutral-bg: #f2f4f7;
  --crm-status-neutral-text: #475467;
  --crm-status-info-bg: #edf5ff;
  --crm-status-info-text: #2563eb;
  --crm-status-warning-bg: #fff7df;
  --crm-status-warning-text: #b7791f;
  --crm-status-success-bg: #eafaf1;
  --crm-status-success-text: #168a4b;
  --crm-status-danger-bg: #fff0f0;
  --crm-status-danger-text: #d92d20;
  --crm-status-muted-bg: #eceef3;
  --crm-status-muted-text: #5f6b7c;
  --crm-type-bg: #edf5ff;
  --crm-type-text: #2563eb;
  --crm-fav: #ffc800;
  --crm-drawer-bg: #ffffff;
  --crm-drawer-border: #e7ecf3;
  --crm-drawer-text: #182230;
  --crm-drawer-muted: #667085;
  --crm-reset-bg: #ffffff;
  --crm-reset-border: #e7ecf3;
  --crm-reset-text: #667085;
  --crm-name: #fc4f4f;

  /* CRM Detail */
  --crm-detail-bg: #f6f8fc;
  --crm-detail-surface: #ffffff;
  --crm-detail-border: #e7ecf3;
  --crm-detail-text: #182230;
  --crm-detail-muted: #667085;
  --crm-detail-hover: #fafbfc;
  --crm-detail-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);

  /* Text */
  --nm-text: #334357;
  --nm-text-secondary: #5a6a7a;
  --nm-text-muted: #6b7a8a;
  --nm-text-inverse: #ffffff;
  --nm-text-placeholder: #c0c0c0;

  /* Border / focus */
  --nm-border: rgba(51, 67, 87, 0.12);
  --nm-border-strong: rgba(51, 67, 87, 0.22);
  --nm-focus-ring: rgba(252, 79, 79, 0.45);

  /* App / radius aliases (referenced with fallbacks across modules) */
  --app-text: #182230;
  --app-text-muted: #667085;
  --app-border: #e7ecf3;
  --nm-radius-sm: var(--radius-sm);
  --nm-radius-md: var(--radius-md);
  --nm-radius-lg: var(--radius-lg);
  --nm-radius-xl: 14px;
  --nm-radius-pill: 999px;

  /* Semantic */
  --nm-danger: #fc4f4f;
  --nm-warning: #f59f00;
  --nm-success: #2f9e44;
  --nm-info: #228be6;
  --nm-danger-soft: rgba(252, 79, 79, 0.12);
  --nm-warning-soft: rgba(245, 159, 0, 0.14);
  --nm-success-soft: rgba(47, 158, 68, 0.12);
  --nm-info-soft: rgba(34, 139, 230, 0.12);

  /* Elevation */
  --nm-shadow-xs: 0 1px 2px rgba(51, 67, 87, 0.06);
  --nm-shadow-sm: 0 1px 2px rgba(51, 67, 87, 0.08);
  --nm-shadow-md: 0 4px 12px rgba(51, 67, 87, 0.1);
  --nm-shadow-lg: 0 12px 32px rgba(51, 67, 87, 0.14);

  /* Gradients */
  --nm-gradient-brand: linear-gradient(
    180deg,
    var(--nm-brand),
    var(--nm-surface-chrome)
  );
  --nm-gradient-auth-dark: linear-gradient(200deg, #151c26, #372e53);
  --nm-gradient-auth-light: linear-gradient(
    300deg,
    var(--nm-surface-highlight),
    var(--nm-surface-raised)
  );

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --strong-radius: var(--radius-lg);
  --light-radius: var(--radius-md);

  /* Layout */
  --header-h: 70px;
  --site-header-h: 56px;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 76px;
  --sidebar-w: var(--sidebar-width);
  --sidebar-w-collapsed: var(--sidebar-collapsed-width);
  --content-max: 1400px;
  --transition: 150ms ease;
  --transition-slow: 180ms ease;

  /* Sidebar (Light) */
  --sidebar-bg: #ffffff;
  --sidebar-surface: #ffffff;
  --sidebar-border: #e7ecf3;
  --sidebar-text: #182230;
  --sidebar-text-muted: #667085;
  --sidebar-section-label: #8a94a6;
  --sidebar-icon: #667085;
  --sidebar-hover-bg: #f7f9fc;
  --sidebar-hover-text: #182230;
  --sidebar-active-bg: #fff1f1;
  --sidebar-active-text: #fc4f4f;
  --sidebar-active-icon: #fc4f4f;
  --sidebar-active-rail: #fc4f4f;
  --sidebar-card-bg: #ffffff;
  --sidebar-card-border: #e6eaf0;
  --sidebar-card-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
  --sidebar-progress-track: #edf1f5;
  --sidebar-progress-fill: #ffc800;
  --sidebar-focus-ring: rgba(252, 79, 79, 0.28);
  --sidebar-premium-accent: #f9f871;
  --sidebar-subnav-text: #667085;
  --sidebar-subnav-hover-bg: #f7f9fc;
  --sidebar-subnav-active-bg: #fff4f4;
  --sidebar-subnav-active-text: #fc4f4f;

  /* Z-index – content < drawer < modal < toast */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-drawer-backdrop: 1100;
  --z-drawer: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-toast: 1500;

  /* Typography */
  --font-1: "Poppins";
  --nm-font: var(--font-1), "Segoe UI", sans-serif;

  /* —— Legacy aliases (Dark Mode greift über --nm-* ) —— */
  --accent: var(--nm-brand);
  --accent-2: var(--nm-accent-2);
  --btn-hover: var(--nm-brand-hover);
  --dark-bg: var(--nm-surface-chrome);
  --light-bg: var(--nm-surface-page);
  --ctn-bg: var(--nm-surface-raised);
  --highlighted-bg: var(--nm-surface-highlight);
  --gradient-bg: var(--nm-gradient-brand);
  --dark-gradient-bg: var(--nm-gradient-auth-dark);
  --light-gradient-bg: var(--nm-gradient-auth-light);
  --light-text: var(--nm-text-inverse);
  --dark-text: var(--nm-text);
  --text-muted: var(--nm-text-muted);
  --placeholder-text: var(--nm-text-placeholder);
  --danger: var(--nm-danger);
  --warning: var(--nm-warning);
  --success: var(--nm-success);
  --info: var(--nm-info);
  --surface-page: var(--nm-surface-page);
  --surface-card: var(--nm-surface-raised);
  --border-clr: var(--nm-border);
  --border-subtle: var(--nm-border);
  --shadow: var(--nm-shadow-md);
  --shadow-sm: var(--nm-shadow-sm);
  --shadow-md: var(--nm-shadow-md);
  --white: #ffffff;
}

/* ==========================================================================
   Design Tokens — Dark (blau-anthrazit, nicht reines Schwarz)
   ========================================================================== */

html[data-theme="dark"] {
  --nm-brand: #ff6b6b;
  --nm-brand-hover: rgba(255, 107, 107, 0.88);
  --nm-accent-2: #ffd24d;
  --nm-accent-detail: #f9f871;

  --nm-surface-page: #0b1220;
  --nm-surface-raised: #131d2b;
  --nm-surface-sunken: #0e1319;
  --nm-surface-overlay: rgba(0, 0, 0, 0.55);
  --nm-surface-chrome: #0f141b;
  --nm-surface-highlight: #2a3442;
  --app-page-bg: #0b1220;
  --app-surface-bg: #131d2b;

  --nm-text: #e8eef4;
  --nm-text-secondary: #b0bac6;
  --nm-text-muted: #8b97a6;
  --nm-text-inverse: #ffffff;
  --nm-text-placeholder: #6b7684;

  --nm-border: #253247;
  --nm-border-strong: rgba(232, 238, 244, 0.18);
  --nm-dash-card-border: #243349;
  --nm-dash-card-shadow: none;
  --dashboard-card-bg: #131d2b;
  --dashboard-card-border: #243349;
  --dashboard-card-text: #f8fafc;
  --dashboard-card-muted: #9aa7b7;
  --dashboard-card-shadow: none;
  --app-header-bg: #0b1220;
  --app-header-border: transparent;
  --app-header-text: #f8fafc;
  --app-header-muted: #9aa7b7;
  --app-header-control-bg: #111c2b;
  --app-header-control-border: #223148;
  --app-header-control-shadow: none;
  --kpi-green-soft: rgba(50, 200, 117, 0.12);
  --kpi-yellow-soft: rgba(240, 180, 41, 0.12);
  --kpi-pink-soft: rgba(240, 68, 138, 0.12);
  --kpi-blue-soft: rgba(59, 130, 246, 0.12);
  --kpi-purple-soft: rgba(155, 93, 229, 0.12);
  --quick-action-bg: #111c2b;
  --quick-action-border: #243349;
  --quick-action-text: #f8fafc;
  --quick-action-icon-bg: #172438;
  --quick-action-hover-bg: #162235;
  --quick-action-primary-icon-bg: #fc4f4f;
  --website-stat-total-soft: rgba(50, 200, 117, 0.12);
  --website-stat-online-soft: rgba(50, 200, 117, 0.12);
  --website-stat-warning-soft: rgba(240, 180, 41, 0.12);
  --website-stat-offline-soft: rgba(252, 79, 79, 0.12);
  --website-stat-maintenance-soft: rgba(139, 92, 246, 0.12);
  --table-header-bg: #111c2b;
  --table-header-text: #a8b3c2;
  --table-border: #243349;

  /* Clients overview (Dark) */
  --client-card-bg: #131d2b;
  --client-card-border: #243349;
  --client-card-text: #f8fafc;
  --client-card-muted: #9aa7b7;
  --client-card-shadow: none;
  --client-table-bg: #131d2b;
  --client-table-header-bg: #111c2b;
  --client-table-border: #243349;
  --client-table-text: #f8fafc;
  --client-table-muted: #9aa7b7;
  --client-table-hover: #172235;
  --contract-none-bg: rgba(152, 162, 179, 0.12);
  --contract-none-text: #a8b3c2;
  --contract-active-bg: rgba(50, 200, 117, 0.14);
  --contract-active-text: #6ee7a0;
  --contract-expiring-bg: rgba(240, 180, 41, 0.14);
  --contract-expiring-text: #f7c948;
  --contract-expired-bg: rgba(252, 79, 79, 0.14);
  --contract-expired-text: #ff8585;
  --client-avatar-0-bg: rgba(59, 130, 246, 0.18);
  --client-avatar-0-text: #93c5fd;
  --client-avatar-1-bg: rgba(139, 92, 246, 0.18);
  --client-avatar-1-text: #c4b5fd;
  --client-avatar-2-bg: rgba(18, 183, 106, 0.18);
  --client-avatar-2-text: #6ee7b7;
  --client-avatar-3-bg: rgba(240, 68, 138, 0.18);
  --client-avatar-3-text: #f9a8d4;
  --client-avatar-4-bg: rgba(13, 148, 136, 0.18);
  --client-avatar-4-text: #5eead4;
  --client-avatar-5-bg: rgba(247, 144, 9, 0.18);
  --client-avatar-5-text: #fdba74;
  --customer-detail-card-bg: #131d2b;
  --customer-detail-card-border: #243349;
  --customer-detail-text: #f8fafc;
  --customer-detail-muted: #9aa7b7;
  --customer-detail-shadow: none;
  --customer-detail-note-bg: #0f1724;
  --customer-detail-note-border: #243349;

  --avatar-blue-bg: rgba(57, 116, 216, 0.16);
  --avatar-blue-text: #8bb6ff;
  --avatar-purple-bg: rgba(122, 77, 216, 0.16);
  --avatar-purple-text: #b79aff;
  --avatar-green-bg: rgba(33, 137, 91, 0.16);
  --avatar-green-text: #75d9a8;
  --avatar-pink-bg: rgba(217, 86, 131, 0.16);
  --avatar-pink-text: #ff9dbc;
  --avatar-orange-bg: rgba(198, 106, 33, 0.16);
  --avatar-orange-text: #f2ad72;
  --avatar-cyan-bg: rgba(22, 138, 152, 0.16);
  --avatar-cyan-text: #73d4df;

  --tasks-card-bg: #131d2b;
  --tasks-card-border: #243349;
  --tasks-text: #f8fafc;
  --tasks-muted: #9aa7b7;
  --tasks-header-bg: #111c2b;
  --tasks-hover: #172235;
  --tasks-shadow: none;
  --tasks-stat-total: #ff8585;
  --tasks-stat-open: #f7c948;
  --tasks-stat-progress: #93c5fd;
  --tasks-stat-done: #6ee7a0;
  --tasks-stat-overdue: #c4b5fd;
  --task-tab-text: #9aa7b7;
  --task-tab-active: #ff6b6b;
  --task-tab-line: #ff6b6b;
  --task-status-open-bg: rgba(152, 162, 179, 0.12);
  --task-status-open-text: #a8b3c2;
  --task-status-progress-bg: rgba(59, 130, 246, 0.14);
  --task-status-progress-text: #7fb1ff;
  --task-status-completed-bg: rgba(50, 200, 117, 0.14);
  --task-status-completed-text: #6ee7a0;
  --task-status-overdue-bg: rgba(252, 79, 79, 0.14);
  --task-status-overdue-text: #ff8585;
  --task-prio-high-bg: rgba(252, 79, 79, 0.14);
  --task-prio-high-text: #ff8585;
  --task-prio-mid-bg: rgba(240, 180, 41, 0.14);
  --task-prio-mid-text: #f7c948;
  --task-prio-low-bg: rgba(50, 200, 117, 0.14);
  --task-prio-low-text: #6ee7a0;
  --task-drawer-bg: #131d2b;
  --task-drawer-border: #243349;
  --task-drawer-text: #f8fafc;
  --task-drawer-muted: #9aa7b7;
  --task-reset-bg: #131d2b;
  --task-reset-border: #243349;
  --task-reset-text: #9aa7b7;

  --crm-table-bg: #131d2b;
  --crm-table-header-bg: #111c2b;
  --crm-table-border: #243349;
  --crm-table-text: #f8fafc;
  --crm-table-muted: #9aa7b7;
  --crm-table-hover: #172235;
  --crm-card-bg: #131d2b;
  --crm-card-border: #243349;
  --crm-shadow: none;
  --crm-stat-total: #ff8585;
  --crm-stat-company: #93c5fd;
  --crm-stat-person: #6ee7a0;
  --crm-stat-active: #f7c948;
  --crm-stat-fav: #c4b5fd;
  --crm-status-neutral-bg: rgba(152, 162, 179, 0.12);
  --crm-status-neutral-text: #a8b3c2;
  --crm-status-info-bg: rgba(59, 130, 246, 0.14);
  --crm-status-info-text: #7fb1ff;
  --crm-status-warning-bg: rgba(240, 180, 41, 0.14);
  --crm-status-warning-text: #f7c948;
  --crm-status-success-bg: rgba(50, 200, 117, 0.14);
  --crm-status-success-text: #6ee7a0;
  --crm-status-danger-bg: rgba(252, 79, 79, 0.14);
  --crm-status-danger-text: #ff8585;
  --crm-status-muted-bg: rgba(152, 162, 179, 0.1);
  --crm-status-muted-text: #9aa7b7;
  --crm-type-bg: rgba(59, 130, 246, 0.14);
  --crm-type-text: #7fb1ff;
  --crm-fav: #ffd34d;
  --crm-drawer-bg: #131d2b;
  --crm-drawer-border: #243349;
  --crm-drawer-text: #f8fafc;
  --crm-drawer-muted: #9aa7b7;
  --crm-reset-bg: #131d2b;
  --crm-reset-border: #243349;
  --crm-reset-text: #9aa7b7;
  --crm-detail-bg: #0b1220;
  --crm-detail-surface: #131d2b;
  --crm-detail-border: #243349;
  --crm-detail-text: #f8fafc;
  --crm-detail-muted: #9aa7b7;
  --crm-detail-hover: #172235;
  --crm-detail-shadow: none;
  --crm-name: #ff6b6b;

  --nm-focus-ring: rgba(249, 248, 113, 0.45);

  --app-text: #f8fafc;
  --app-text-muted: #9aa7b7;
  --app-border: #243349;

  --nm-danger: #ff6b6b;
  --nm-warning: #ffb020;
  --nm-success: #3dd68c;
  --nm-info: #4dabf7;
  --nm-danger-soft: rgba(255, 107, 107, 0.16);
  --nm-warning-soft: rgba(255, 176, 32, 0.16);
  --nm-success-soft: rgba(61, 214, 140, 0.14);
  --nm-info-soft: rgba(77, 171, 247, 0.14);

  --nm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --nm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --nm-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --nm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

  --nm-gradient-brand: linear-gradient(180deg, var(--nm-brand), #1a222d);
  --nm-gradient-auth-dark: linear-gradient(200deg, #0a0e14, #1e1830);
  --nm-gradient-auth-light: linear-gradient(
    300deg,
    var(--nm-surface-highlight),
    var(--nm-surface-raised)
  );

  /* Sidebar (Dark) */
  --sidebar-bg: #07111f;
  --sidebar-surface: #0b1726;
  --sidebar-border: #1b2a3a;
  --sidebar-text: #f8fafc;
  --sidebar-text-muted: #9aa7b7;
  --sidebar-section-label: #7e8a99;
  --sidebar-icon: #a7b0be;
  --sidebar-hover-bg: #0f1c2b;
  --sidebar-hover-text: #ffffff;
  --sidebar-active-bg: #21191f;
  --sidebar-active-text: #ff6b6b;
  --sidebar-active-icon: #ff6b6b;
  --sidebar-active-rail: #ff6b6b;
  --sidebar-card-bg: #111e2d;
  --sidebar-card-border: #233246;
  --sidebar-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  --sidebar-progress-track: #243447;
  --sidebar-progress-fill: #ffc800;
  --sidebar-focus-ring: rgba(255, 107, 107, 0.36);
  --sidebar-premium-accent: #f9f871;
  --sidebar-subnav-text: #9aa7b7;
  --sidebar-subnav-hover-bg: #0f1c2b;
  --sidebar-subnav-active-bg: #21191f;
  --sidebar-subnav-active-text: #ff6b6b;

  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ------- Fonts -------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*,
html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--nm-font, "Poppins", sans-serif);
  scroll-behavior: smooth;
  font-size: 14px;
  color: var(--dark-text);
}

html {
  height: 100%;
}

body {
  background-color: var(--dark-bg);
  min-height: 100%;
}

/* Dashboard-Shell: Dokument-Scroll abschalten, Content scrollt in section */
body:has(.db-container) {
  height: 100%;
  overflow: hidden;
  background-color: var(
    --app-page-bg,
    var(--nm-surface-page, var(--surface-page))
  );
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   Design System — nm-* Komponenten (Primär) + Legacy-Aliase
   =================================================================== */

.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--nm-radius-md, var(--light-radius));
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--nm-motion-fast, 0.15s) ease,
    color var(--nm-motion-fast, 0.15s) ease,
    border-color var(--nm-motion-fast, 0.15s) ease,
    box-shadow var(--nm-motion-fast, 0.15s) ease,
    opacity var(--nm-motion-fast, 0.15s) ease;
}

.nm-btn:focus-visible {
  outline: 2px solid var(--nm-brand, var(--accent));
  outline-offset: 2px;
}

.nm-btn:disabled,
.nm-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.75;
  pointer-events: none;
}

.nm-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  display: block;
}

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

.nm-btn--primary span,
.nm-btn--primary svg,
.nm-btn--primary .nm-icon {
  color: #fff;
  stroke: currentColor;
  fill: none;
}

.nm-btn--primary:hover {
  background-color: var(--nm-brand-hover, var(--dark-bg));
  color: #fff;
}

.nm-btn--primary:hover span,
.nm-btn--primary:hover svg,
.nm-btn--primary:hover .nm-icon {
  color: #fff;
  stroke: currentColor;
}

.nm-btn--secondary {
  background-color: transparent;
  border-color: var(--nm-border, #d0d5dd);
  color: var(--nm-text, var(--dark-text));
}

.nm-btn--secondary:hover {
  background-color: var(--nm-surface-sunken, rgba(0, 0, 0, 0.04));
  border-color: var(--nm-text-muted, var(--app-text-muted));
}

.nm-btn--neutral {
  background-color: var(--nm-surface-sunken, #eef1f5);
  color: var(--nm-text, var(--dark-text));
}

.nm-btn--neutral:hover {
  background-color: var(--nm-border, #d0d5dd);
}

.nm-btn--danger {
  background-color: var(--nm-danger, var(--danger, var(--nm-brand)));
  color: #fff;
}

.nm-btn--danger:hover {
  filter: brightness(0.92);
}

.nm-btn--ghost {
  background: transparent;
  color: var(--nm-text-secondary, var(--dark-text));
  padding: 0.4rem 0.55rem;
  min-height: 34px;
}

.nm-btn--ghost:hover {
  background-color: var(--nm-surface-sunken, rgba(0, 0, 0, 0.06));
}

.nm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--nm-text-secondary, var(--dark-text));
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.nm-icon-btn:hover {
  background-color: var(--nm-surface-sunken, rgba(0, 0, 0, 0.06));
  color: var(--nm-text, var(--dark-text));
}

.nm-icon-btn:focus-visible {
  outline: 2px solid var(--nm-brand, var(--accent));
  outline-offset: 2px;
}

.nm-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.nm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.nm-badge--success {
  background: var(--nm-success-soft, rgba(47, 158, 68, 0.12));
  color: var(--nm-success, var(--success));
}

/* CRM Research: Name+URL ermittelt (soft) vs. bewusst gespeichert (stärker) */
.nm-badge--resolved {
  font-weight: 600;
}

.nm-badge--saved {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nm-success, #2f9e44) 35%, transparent);
}

.nm-badge--warning {
  background: var(--nm-warning-soft, rgba(245, 159, 0, 0.15));
  color: var(--nm-warning, #b36b00);
}

/* CRM Research: „Prüfung nötig“ vs. „Website fehlt“ (beide Warning-Familie, visuell getrennt) */
.nm-badge--amber {
  background: rgba(217, 119, 6, 0.14);
  color: #9a3412;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.28);
}

.nm-badge--danger {
  background: var(--nm-danger-soft, rgba(252, 79, 79, 0.12));
  color: var(--nm-danger, var(--danger));
}

.nm-badge--info {
  background: var(--nm-info-soft, rgba(34, 139, 230, 0.12));
  color: var(--nm-info, var(--info));
}

.nm-badge--neutral {
  background: var(--nm-surface-sunken, rgba(51, 67, 87, 0.08));
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-card {
  background: var(--nm-surface-raised, var(--ctn-bg, #fff));
  border: 1px solid var(--nm-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--nm-radius-lg, 12px);
  box-shadow: var(--nm-shadow-sm, var(--shadow, none));
  padding: var(--space-4, 1rem);
}

.nm-card--flush {
  padding: 0;
}

.nm-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
}

.nm-page-header__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-page-header__crumbs a {
  color: var(--nm-text-secondary, var(--dark-text));
}

.nm-page-header__crumbs a:hover {
  color: var(--nm-brand, var(--accent));
}

.nm-page-header__sep {
  color: var(--nm-text-muted, var(--text-muted));
  opacity: 0.7;
}

.nm-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
}

.nm-page-header__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nm-text, var(--dark-text));
}

.nm-page-header__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--nm-text-secondary, var(--text-muted));
}

.nm-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.nm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.nm-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.nm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: var(--space-8, 2.5rem) var(--space-4, 1rem);
  color: var(--nm-text-secondary, var(--text-muted));
}

.nm-empty__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nm-text, var(--dark-text));
}

.nm-empty__text {
  margin: 0;
  max-width: 28rem;
  font-size: 0.9rem;
}

.nm-empty__action {
  margin-top: 0.75rem;
}

.nm-alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.nm-alert--info {
  background: var(--nm-info-soft, rgba(34, 139, 230, 0.1));
  border-color: rgba(34, 139, 230, 0.25);
  color: var(--nm-text, var(--dark-text));
}

.nm-alert--success {
  background: var(--nm-success-soft, rgba(47, 158, 68, 0.1));
  border-color: rgba(47, 158, 68, 0.25);
}

.nm-alert--warning {
  background: var(--nm-warning-soft, rgba(245, 159, 0, 0.12));
  border-color: rgba(245, 159, 0, 0.3);
}

.nm-alert--danger {
  background: var(--nm-danger-soft, rgba(252, 79, 79, 0.1));
  border-color: rgba(252, 79, 79, 0.25);
}

.nm-skeleton {
  display: block;
  border-radius: var(--nm-radius-md, 8px);
  background: linear-gradient(
    90deg,
    var(--nm-surface-sunken, #e8ecf1) 25%,
    var(--nm-surface-raised, #f5f7fa) 50%,
    var(--nm-surface-sunken, #e8ecf1) 75%
  );
  background-size: 200% 100%;
  animation: nm-skeleton-shimmer 1.2s ease-in-out infinite;
}

html[data-theme="dark"] .nm-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 75%
  );
  background-size: 200% 100%;
}

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

.nm-skeleton--line {
  height: 0.85rem;
  margin-bottom: 0.5rem;
}

.nm-skeleton--card {
  height: 4.5rem;
  margin-bottom: 0.65rem;
}

.nm-skeleton--label {
  width: 42%;
  max-width: 5.5rem;
  height: 0.65rem;
  margin-bottom: 0.55rem;
}

.nm-skeleton--value {
  width: 72%;
  max-width: 7.5rem;
  height: 1.35rem;
  margin-bottom: 0.45rem;
}

.nm-skeleton--hint {
  width: 55%;
  max-width: 6rem;
  height: 0.65rem;
  margin-bottom: 0.65rem;
}

.nm-skeleton--link {
  width: 38%;
  max-width: 4.75rem;
  height: 0.55rem;
  margin-bottom: 0;
}

.nm-skeleton--thumbnail {
  width: 100%;
  height: 3.25rem;
  margin-bottom: 0.55rem;
  border-radius: var(--nm-radius-sm, 6px);
}

.nm-skeleton--screenshot {
  width: 100%;
  min-height: 200px;
  border-radius: var(--nm-radius-md, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .nm-skeleton {
    animation: none;
    background: var(--nm-surface-sunken, #e8ecf1);
  }

  html[data-theme="dark"] .nm-skeleton {
    background: rgba(255, 255, 255, 0.08);
  }
}

.nm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.nm-toast.toast,
.nm-toast {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: var(--nm-z-toast, 10000);
  min-width: 220px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 1rem 1.15rem 1.15rem;
  border-radius: var(--nm-radius-md, 10px);
  background: var(--nm-surface-overlay, var(--dark-bg));
  color: var(--nm-text-inverse, var(--light-text));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--nm-shadow-lg, var(--shadow));
  overflow: hidden;
}

.nm-toast--success {
  border-left: 3px solid var(--nm-success, var(--success));
}

.nm-toast--error,
.nm-toast--danger {
  border-left: 3px solid var(--nm-danger, var(--danger));
}

.nm-toast--warning {
  border-left: 3px solid var(--nm-warning, #f59f00);
}

.nm-toast--info {
  border-left: 3px solid var(--nm-brand, var(--accent));
}

@media (max-width: 768px) {
  .nm-page-header__title {
    font-size: 1.15rem;
  }

  .nm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .nm-toolbar__group {
    width: 100%;
  }

  .nm-toolbar__group .nm-btn {
    flex: 1 1 auto;
  }

  .nm-toast.toast,
  .nm-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

a {
  text-decoration: none;
  color: var(--accent);
  transition: all 0.3s ease;
}

a:hover {
  color: var(--accent-2);
}

ul {
  list-style-type: none;
}

.trennlinie {
  width: 100%;
  background-color: var(--accent);
  height: 1px;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
}

h2 {
  font-size: 2.25rem;
  font-weight: 800;
}

h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

h4 {
  font-size: 1.5rem;
  font-weight: 600;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
}

h6 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
}

small,
.tinytext {
  font-size: 0.8rem;
}

.text-centered {
  text-align: center;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

span {
  font-size: inherit;
}

svg {
  stroke: var(--accent);
  fill: none;
  width: 25px;
  height: 25px;
  stroke-width: 1.5px;
}

.notification,
#notification {
  background-color: var(--success);
  opacity: 1;
  transition: opacity 0.5s ease;
  display: none;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  background: none;
  border: none;
}

.success {
  color: var(--success);
}

.plugin-status-updated {
  color: var(--success);
  font-weight: 600;
}

.plugin-status-current {
  color: var(--dark-text);
}

/* ---- Website Details: Kommentare ---- */
#comments-preloader,
.comments-preloader {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  width: 100%;
}

#comments-preloader[style*="flex"],
.comments-preloader:not([hidden]) {
  display: flex;
}

.comments-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0;
}

.nm-site-detail-page .comments-skeleton-row td {
  height: 52px;
  vertical-align: middle;
}

.nm-site-detail-page .comments-skeleton-row .nm-skeleton {
  width: 100%;
  max-width: 9rem;
  margin: 0;
}

.nm-site-detail-page .comments-skeleton-row td:nth-child(4) .nm-skeleton {
  max-width: 14rem;
}

.comments-toolbar-left,
.comments-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.comments-selected-count {
  font-size: 0.9rem;
  font-weight: 600;
}

.comment-content-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-status {
  font-weight: 600;
  font-size: 0.85rem;
}

.comment-status-approved {
  color: var(--success);
}

.comment-status-pending {
  color: var(--accent);
}

.comment-status-spam,
.comment-status-trash {
  color: var(--warning);
}

.comments-actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.comments-pagination-ctn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

.comments-settings-bar,
.comments-settings-panel {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 0;
}

.comments-settings-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--website-detail-text, var(--nm-text));
  margin-right: 0.25rem;
}

.comments-settings-hint {
  display: none;
}

.comments-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  width: 100%;
}

.comments-settings-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.88rem;
  white-space: nowrap;
}

.comments-settings-status {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.8;
  min-height: 0;
}

.nm-site-detail-page #comments-settings-panel.nm-site-tab-toolbar {
  border-radius: var(--nm-radius-xl, 14px) 14px 0 0;
  border-bottom: 1px solid var(--detail-toolbar-border, var(--app-border));
}

.nm-site-detail-page #comments-settings-panel + .comments-toolbar {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

#themes-table .update-theme-btn.link-btn,
#plugins-table .update-plugin-btn.link-btn {
  color: var(--accent);
}

#themes-data td,
#plugins-data td {
  vertical-align: middle;
}

.warning {
  color: var(--warning) !important;
}

.alert-message {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.highlighted {
  color: var(--accent);
}

/* Scrollbar Styling Universell */
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: var(--light-radius);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 768px) {
  *,
  html,
  body {
    overscroll-behavior: contain;
  }
}

/* -----------------------------

            Buttons
            
---------------------------------*/

.btn-ctn {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.btn-ctn .form-field {
  flex: 1 1 12rem;
  width: auto;
  max-width: 260px;
  min-width: 0;
}

.modal-btn-ctn {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.danger-btn,
.normal-btn-3,
.normal-btn-2,
.normal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  border-radius: var(--light-radius);
  background-color: var(--accent);
  color: var(--light-text);
  transition:
    background-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
  gap: 0.3rem;
  min-height: 38px;
}

.danger-btn:focus-visible,
.normal-btn-3:focus-visible,
.normal-btn-2:focus-visible,
.normal-btn:focus-visible,
.link-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
.select-selected:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.normal-btn {
  background-color: var(--accent);
  color: var(--light-text) !important;
}

.normal-btn svg {
  stroke: var(--light-text);
  display: block;
  margin-bottom: 3px;
}

.normal-btn:hover {
  background-color: var(--dark-bg);
}

.normal-btn:disabled,
.normal-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.75;
  pointer-events: none;
}

.normal-btn.is-loading .preloader {
  width: 18px;
  height: 18px;
  border-width: 2px;
  margin: 0;
  flex-shrink: 0;
}

.normal-btn.is-loading .btn-loading-label {
  white-space: nowrap;
}

.copy-api-token-btn svg,
.copy-api-token-btn use {
  pointer-events: none;
}

#delete-website-modal .modal-content {
  min-width: 280px;
}

#delete-website-modal.is-loading .modal-content {
  min-height: 180px;
}

.delete-website-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
}

.delete-website-modal-loading[hidden],
.delete-website-modal-body[hidden] {
  display: none !important;
}

.delete-website-loading-text {
  margin: 0;
  font-weight: 600;
}

.normal-btn-2 {
  background-color: var(--highlighted-bg);
  color: var(--dark-text);
}

.normal-btn-2 svg {
  stroke: var(--accent);
}

.normal-btn-2:hover {
  background-color: var(--dark-text);
  color: var(--light-text);
}

.normal-btn-2:hover svg {
  stroke: var(--light-text);
}

.normal-btn-3 {
  background-color: var(--dark-bg);
  color: var(--light-text);
}

.normal-btn-3:hover {
  background-color: var(--highlighted-bg);
  color: var(--dark-text);
}

.normal-btn-3 svg {
  stroke: var(--light-text);
}

.normal-btn-3:hover svg {
  stroke: var(--accent);
}

.danger-btn {
  background-color: var(--warning);
}

.danger-btn:hover {
  background-color: var(--dark-bg);
}

.danger-btn svg,
.normal-btn svg,
.normal-btn-2 svg,
.normal-btn-3 svg {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  gap: 0.3rem;
}

.link-btn svg {
  stroke: var(--accent);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
}

.link-btn:hover svg {
  stroke: var(--accent-2);
}

.dismiss-link-btn {
  color: var(--dark-text);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dismiss-link-btn:hover {
  color: var(--accent);
}

.svg-btn,
.icon-btn {
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn {
  border-radius: 50%;
  background-color: var(--accent);
  padding: 0.4rem;
}

.icon-btn:hover {
  background-color: var(--dark-bg);
}

.svg-btn svg {
  stroke: var(--accent);
  transition: all 0.3s ease;
}

.icon-btn svg {
  stroke: var(--light-text);
  transition: all 0.3s ease;
}

.svg-btn:hover svg {
  stroke: var(--dark-text);
}

.icon-btn:hover svg {
  stroke: var(--light-text);
}

.icon-btn-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: var(--highlighted-bg);
  width: 30px;
  height: 30px;
  padding: 0.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-btn-2:hover {
  background-color: var(--dark-bg);
}

.icon-btn-2 svg {
  stroke: var(--dark-text);
  transition: all 0.3s ease;
}

.icon-btn-2:hover svg {
  stroke: var(--accent-2);
}

.blink {
  animation: blink 1.5s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

button[disabled] {
  background-color: var(--highlighted-bg);
  cursor: not-allowed;
}

button[disabled] svg,
button[disabled] svg:hover {
  stroke: rgb(193, 193, 193) !important;
  cursor: not-allowed;
}

button[disabled]:hover::after {
  position: absolute;
  background-color: var(--dark-bg);
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  top: 100%;
  left: 0;
}

/* -----------------------------

        Animationen / FX
            
---------------------------------*/

@keyframes blink {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

/* -----------------------------

            Preloader
            
---------------------------------*/
#logReportPreloader,
#themes-preloader,
#users-preloader,
#plugins-preloader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 1rem;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid var(--accent);
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
  margin-bottom: 20px;
  justify-self: center;
}

#plugins-preloader p {
  font-size: 16px;
  text-align: center;
}

.preloader-ctn {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.preloader {
  display: flex;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--accent);
  background: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

.bigger-preloader {
  display: flex;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--accent);
  background: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

.icon-preloader {
  display: flex;
  background: none;
  animation: float 2s linear infinite;
}

.icon-preloader svg {
  fill: var(--accent);
  height: 35px;
  width: 35px;
}

.progressBarContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  background-color: #eee;
  margin-top: 15px;
  border-radius: 5px;
  overflow: hidden;
  padding-left: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* -----------------------------

            Stile Allgemein 

---------------------------------*/

.db-container {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-columns 180ms ease;
}

.db-container.is-sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

@media (min-width: 1025px) {
  html.nm-sidebar-collapsed .db-container {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
  }

  html.nm-sidebar-collapsed aside,
  html.nm-sidebar-collapsed aside.nm-sidebar {
    width: var(--sidebar-w-collapsed);
  }
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 0.75rem;
}

.controls p,
.controls p span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.control-ctn {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.control-ctn input {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 260px;
}

/* Filter-Kinder am gemeinsamen .controls-Flex teilnehmen lassen */
.controls .control-ctn {
  display: contents;
}

.controls > input[type="text"],
.controls .control-ctn > input[type="text"] {
  flex: 1 1 12rem;
  min-width: min(12rem, 100%);
  max-width: 260px;
  width: auto;
}

.controls .form-field.filter-field,
.controls .control-ctn .form-field.filter-field {
  flex: 1 1 10rem;
  width: auto;
  max-width: 200px;
  min-width: min(10rem, 100%);
}

.controls .normal-btn,
.controls .normal-btn-2,
.controls .control-ctn > .normal-btn,
.controls .control-ctn > .normal-btn-2 {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
}

@media (max-width: 1300px) {
  .db-container {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .db-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--header-h) minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
    max-width: 100%;
  }

  .db-container.is-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  #sidebarCollapseBtn {
    display: none;
  }

  #hamburger-menu {
    display: inline-flex;
  }

  .mobile-logo-ctn {
    display: flex;
  }

  .nm-topbar-user {
    display: none;
  }

  .account-settings-ctn {
    border-left: 0;
    padding-left: 0;
  }
}

@media (min-width: 1025px) {
  #hamburger-menu {
    display: none;
  }
}

@media (max-width: 768px) {
  .controls {
    gap: 0.5rem;
  }

  .controls > input[type="text"],
  .controls .control-ctn > input[type="text"],
  .controls .form-field.filter-field,
  .controls .control-ctn .form-field.filter-field {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .controls .normal-btn,
  .controls .normal-btn-2,
  .controls .control-ctn > .normal-btn,
  .controls .control-ctn > .normal-btn-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
  }
}

/* -----------------------------

            Stile Header 

---------------------------------*/
/* Nur Topbar — nicht jedes <header> (Page-Header nutzt .nm-page-header als div) */
header.nm-topbar {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(
    --app-header-bg,
    var(--app-page-bg, var(--nm-surface-page))
  );
  position: relative;
  top: 0;
  height: var(--header-h);
  min-height: var(--header-h);
  z-index: 100;
  color: var(--app-header-text, var(--nm-text));
  gap: 1rem;
  padding: 0 28px;
  width: 100%;
  flex-shrink: 0;
  border-bottom: 1px solid var(--app-header-border, transparent);
}

.nm-topbar__start,
.nm-topbar__end {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nm-topbar__end {
  margin-left: auto;
  gap: 0.4rem;
}

.nm-topbar-search {
  position: relative;
  display: none;
  flex-direction: row;
  align-items: center;
  width: min(360px, 38vw);
  height: 44px;
  margin-left: 0.35rem;
  padding: 0 10px 0 12px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--app-header-control-border, #e6eaf0);
  background: var(--app-header-control-bg, #fff);
  box-shadow: var(--app-header-control-shadow, none);
  cursor: text;
  gap: 8px;
  font-size: inherit;
  font-weight: inherit;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .nm-topbar-search {
    display: inline-flex;
  }
}

.nm-topbar-search__icon {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--app-header-muted, var(--app-text-muted));
  pointer-events: none;
  line-height: 0;
  transform: none;
}

.nm-topbar-search__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Spezifität > globale input:not([...]) Regel, sonst greift padding: … 1rem */
header.nm-topbar .nm-topbar-search input.nm-topbar-search__input,
header.nm-topbar .nm-topbar-search input.nm-topbar-search__input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--app-header-text, var(--app-text));
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.nm-topbar-search__input::-webkit-search-decoration,
.nm-topbar-search__input::-webkit-search-cancel-button,
.nm-topbar-search__input::-webkit-search-results-button,
.nm-topbar-search__input::-webkit-search-results-decoration {
  display: none;
}

.nm-topbar-search__input::placeholder {
  color: var(--app-header-muted, var(--app-text-muted));
}

.nm-topbar-search__kbd {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 6px;
  border: 1px solid var(--app-header-control-border, #e6eaf0);
  background: color-mix(
    in srgb,
    var(--app-header-control-bg, #fff) 88%,
    var(--app-header-muted, var(--app-text-muted))
  );
  color: var(--app-header-muted, var(--app-text-muted));
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
  transform: none;
}

#sendFeedbackBtn {
  position: static;
  display: inline-flex;
  right: auto;
  bottom: auto;
  z-index: auto;
}

#sendFeedbackBtn .icon-btn,
#sendFeedbackBtn .nm-topbar-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: none;
  color: var(--app-header-muted, var(--app-text-muted));
}

header.nm-topbar #sendFeedbackBtn .nm-topbar-icon,
header.nm-topbar #sendFeedbackBtn .nm-topbar-icon svg,
header.nm-topbar #sendFeedbackBtn .nm-topbar-icon svg * {
  color: var(--app-header-muted, var(--app-text-muted));
  fill: currentColor;
}

header.nm-topbar #sendFeedbackBtn .nm-topbar-icon svg [stroke] {
  fill: none;
  stroke: currentColor;
}

#sendFeedbackBtn .icon-btn:hover,
#sendFeedbackBtn .nm-topbar-icon:hover {
  color: var(--app-header-text, var(--app-text));
  background: color-mix(
    in srgb,
    var(--app-header-muted, var(--app-text-muted)) 10%,
    transparent
  );
}

#sendFeedbackBtn .icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: inherit;
}

.nm-topbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--nm-radius-md, 10px);
  background: transparent;
  color: var(--app-header-muted, var(--app-text-muted));
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition:
    background-color var(--transition),
    color var(--transition);
}

header.nm-topbar .nm-topbar-icon,
header.nm-topbar .nm-topbar-icon svg,
header.nm-topbar .nm-topbar-icon svg *,
header.nm-topbar a.nm-topbar-icon,
header.nm-topbar a.nm-topbar-icon:visited,
header.nm-topbar a.nm-topbar-icon:hover,
header.nm-topbar a.nm-topbar-icon:focus-visible {
  color: var(--app-header-muted, var(--app-text-muted));
  fill: currentColor;
}

header.nm-topbar .nm-topbar-icon svg [stroke] {
  fill: none;
  stroke: currentColor;
}

.nm-topbar-icon:hover,
.nm-topbar-icon:focus-visible {
  background: color-mix(
    in srgb,
    var(--app-header-muted, var(--app-text-muted)) 10%,
    transparent
  );
  color: var(--app-header-text, var(--app-text));
  outline: none;
}

.nm-topbar-icon:focus-visible {
  box-shadow: 0 0 0 2px var(--nm-focus-ring, rgba(252, 79, 79, 0.35));
}

.nm-topbar-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nm-topbar-divider {
  width: 1px;
  height: 28px;
  margin: 0 0.35rem;
  background: var(--app-header-control-border, #e6eaf0);
  flex-shrink: 0;
}

#headerMessagesLink .notification-alert {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  display: none;
  font-size: 10px !important;
}

#headerMessagesLink.nav-link.active {
  background: color-mix(in srgb, var(--nm-brand) 12%, transparent);
  color: var(--nm-brand);
}

#sendFeedbackBtn[hidden] {
  display: none !important;
}

.nm-theme-icon[hidden],
.nm-cmdk-slot[hidden] {
  display: none !important;
}

.nm-topbar-user {
  margin: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-header-text, var(--nm-text));
  font-size: 13px;
}

header .logo-ctn {
  display: none;
}

header .logo-ctn img {
  width: 100%;
}

.account-settings-ctn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 0;
  padding-left: 0;
  min-width: 0;
}

.nm-topbar-profile,
.account-settings-ctn .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  max-width: 240px;
  height: 44px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: var(--nm-radius-md, 10px);
  background: transparent;
  color: var(--app-header-text, var(--app-text));
  cursor: pointer;
  text-align: left;
}

.nm-topbar-profile:hover,
.nm-topbar-profile:focus-visible {
  background: color-mix(
    in srgb,
    var(--app-header-muted, var(--app-text-muted)) 8%,
    transparent
  );
  outline: none;
}

.nm-topbar-profile__avatar,
.account-settings-ctn .logo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--app-header-control-bg, #fff);
  border: 1px solid var(--app-header-control-border, #e6eaf0);
  flex-shrink: 0;
  display: block;
}

.account-settings-ctn .logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  padding: 0;
  background: #fff;
}

.nm-topbar-profile__meta {
  display: none;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

@media (min-width: 1025px) {
  .nm-topbar-profile__meta {
    display: flex;
  }
}

.nm-topbar-profile__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--app-header-text, var(--app-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm-topbar-profile__role {
  font-size: 0.72rem;
  color: var(--app-header-muted, var(--app-text-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm-topbar-profile__chevron {
  flex-shrink: 0;
  color: var(--app-header-muted, var(--app-text-muted));
}

.settings-trigger {
  cursor: pointer;
  user-select: none;
}

.account-settings-ctn .dropdown-menu {
  position: absolute;
  background-color: var(
    --app-surface-bg,
    var(--nm-surface-raised, var(--light-bg))
  );
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 230px;
  max-width: calc(100vw - 2rem);
  box-shadow: var(--shadow);
  border-radius: var(--light-radius);
  border: 1px solid var(--nm-border, var(--border-clr));
  padding: 0.5rem;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: var(--z-dropdown, 1000);
}

.account-settings-ctn .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-settings-ctn .dropdown-menu[hidden] {
  display: none;
}

.account-settings-ctn .dropdown-menu.show:not([hidden]) {
  display: block;
}

.account-settings-ctn .dropdown-menu a,
.account-settings-ctn .dropdown-menu .nm-topbar-feedback-item {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  color: var(--dark-text);
  font-weight: 500;
  font: inherit;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.account-settings-ctn .dropdown-menu a svg,
.account-settings-ctn .dropdown-menu .nm-topbar-feedback-item svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.account-settings-ctn .dropdown-menu a:hover,
.account-settings-ctn .dropdown-menu .nm-topbar-feedback-item:hover {
  background: var(--nm-surface-sunken, var(--highlighted-bg));
  color: var(--accent);
}

.account-settings-ctn .dropdown-menu a:hover svg {
  transform: translateX(-2px);
}

.account-settings-ctn .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.account-settings-ctn p,
.account-settings-ctn .nm-topbar-user {
  color: var(--app-header-text, var(--nm-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.account-settings-ctn .dropdown-menu .trennlinie {
  margin: 0.35rem 0;
  height: 1px;
  background: var(--nm-border, var(--border-clr));
}

#settings-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--light-bg);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

#settings-menu div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#settings-menu div h4 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--dark-text);
}

#settings-menu div a {
  display: flex;
  align-items: center;
  color: var(--dark-text);
  transition: all 0.3s ease;
}

#settings-menu div a:hover {
  color: var(--accent);
}

#settings-menu div a svg,
h4 svg {
  fill: var(--dark-text);
  width: 1.3rem;
  transition: all 0.3s ease;
}

#settings-menu div a:hover svg {
  fill: var(--accent);
}

.mobile-menu-ctn {
  display: none;
}

.mobile-logo-ctn {
  display: none;
  align-items: center;
  min-width: 0;
}

.mobile-logo-ctn img {
  width: auto;
  max-height: 28px;
  max-width: 140px;
}

.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.line {
  fill: none;
  stroke: var(--app-header-text, var(--app-text));
  stroke-width: 6;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 30 207;
  stroke-width: 6;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.line3 {
  stroke-dasharray: 40 207;
  stroke-width: 6;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

@media (max-width: 1400px) {
  header .logo-ctn {
    display: flex;
    align-items: center;
    margin-right: auto;
    width: 50%;
  }
}

@media (max-width: 1024px) {
  .account-settings-ctn {
    width: auto;
    border-left: none;
    justify-content: flex-end;
    padding-left: 0;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
  }

  .account-settings-ctn p {
    font-size: 0.9rem;
  }

  .header-links {
    width: 10%;
  }

  .mobile-logo-ctn {
    display: flex;
    width: auto;
    align-items: center;
  }

  .mobile-logo-ctn img {
    width: auto;
    min-width: 0;
    max-width: 140px;
  }

  .mobile-menu-ctn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 10%;
  }

  header.nm-topbar {
    justify-content: space-between;
    padding: 0 14px;
  }
}

/* -----------------------------

            Stile Sidebar (Redesign)

---------------------------------*/

.nm-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 17, 31, 0.48);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.nm-sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.nm-sidebar-drawer-open {
  overflow: hidden;
}

.nm-dev-session-refresh {
  /* Legacy floating control – ersetzt durch .nm-webmaster-session-control in der Sidebar */
  display: none !important;
}

.nm-webmaster-session-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-primary-300, #bdb4fe) 55%,
      var(--sidebar-border, #e4e7ec)
    );
  border-radius: var(--nm-radius-md, 8px);
  background: color-mix(
    in srgb,
    var(--color-primary-50, #f5f3ff) 70%,
    transparent
  );
  color: var(--sidebar-text, #344054);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition:
    background 140ms ease,
    border-color 140ms ease;
}
.nm-webmaster-session-control:hover,
.nm-webmaster-session-control:focus-visible {
  background: color-mix(
    in srgb,
    var(--color-primary-100, #ebe9fe) 80%,
    transparent
  );
  border-color: var(--color-primary-300, #bdb4fe);
  outline: none;
}
.nm-webmaster-session-control__eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-600, #6b46f2);
  line-height: 1.2;
}
.nm-webmaster-session-control__action {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sidebar-text, #1d2939);
}
aside.is-collapsed .nm-webmaster-session-control,
html.nm-sidebar-collapsed aside .nm-webmaster-session-control {
  display: none;
}

aside,
aside.nm-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  transition:
    transform 180ms ease,
    width 180ms ease;
  transform: translateX(0);
  z-index: 200;
}

aside.is-collapsed,
html.nm-sidebar-collapsed aside,
html.nm-sidebar-collapsed aside.nm-sidebar {
  width: var(--sidebar-collapsed-width);
}

.nm-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 72px;
  height: 74px;
  padding: 20px 18px 8px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--sidebar-bg);
}

.nm-sidebar-collapse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.nm-sidebar-collapse__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nm-sidebar-collapse__icon--expand {
  display: none;
}

.nm-sidebar-collapse .nm-icon {
  width: 18px;
  height: 18px;
}

.nm-sidebar-collapse:hover,
.nm-sidebar-collapse:focus-visible {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

.nm-sidebar-collapse:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

aside.is-collapsed .nm-sidebar-collapse__icon--collapse,
html.nm-sidebar-collapsed aside .nm-sidebar-collapse__icon--collapse {
  display: none;
}

aside.is-collapsed .nm-sidebar-collapse__icon--expand,
html.nm-sidebar-collapsed aside .nm-sidebar-collapse__icon--expand {
  display: inline-flex;
}

.nm-sidebar-logo-link {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}

.nm-sidebar-logo-stack {
  position: relative;
  display: block;
  width: 130px;
  height: 28px;
}

.nm-sidebar-logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  max-width: 130px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.nm-sidebar-logo--mark {
  width: 28px;
  max-width: 28px;
  max-height: 36px;
  height: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

html[data-theme="light"] .nm-sidebar-logo--full.nm-sidebar-logo--on-light,
:root:not([data-theme="dark"])
  .nm-sidebar-logo--full.nm-sidebar-logo--on-light {
  opacity: 1;
  pointer-events: auto;
}

html[data-theme="dark"] .nm-sidebar-logo--full.nm-sidebar-logo--on-dark {
  opacity: 1;
  pointer-events: auto;
}

aside.is-collapsed .nm-sidebar-logo-stack,
html.nm-sidebar-collapsed aside .nm-sidebar-logo-stack {
  width: 36px;
  height: 40px;
}

aside.is-collapsed .nm-sidebar-logo--full,
html.nm-sidebar-collapsed aside .nm-sidebar-logo--full {
  opacity: 0 !important;
  pointer-events: none;
}

aside.is-collapsed .nm-sidebar-logo--mark-on-light,
html.nm-sidebar-collapsed aside .nm-sidebar-logo--mark-on-light {
  opacity: 1;
  pointer-events: auto;
}

html[data-theme="dark"] aside.is-collapsed .nm-sidebar-logo--mark-on-light,
html[data-theme="dark"].nm-sidebar-collapsed
  aside
  .nm-sidebar-logo--mark-on-light {
  opacity: 0;
  pointer-events: none;
}

html[data-theme="dark"] aside.is-collapsed .nm-sidebar-logo--mark-on-dark,
html[data-theme="dark"].nm-sidebar-collapsed
  aside
  .nm-sidebar-logo--mark-on-dark {
  opacity: 1;
  pointer-events: auto;
}

aside.is-collapsed .nm-sidebar__brand,
html.nm-sidebar-collapsed aside .nm-sidebar__brand {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 16px 10px 10px;
  gap: 0.45rem;
}

aside.is-collapsed .nm-sidebar-collapse,
html.nm-sidebar-collapsed aside .nm-sidebar-collapse {
  order: -1;
}

aside.is-collapsed .nm-sidebar-logo-link,
html.nm-sidebar-collapsed aside .nm-sidebar-logo-link {
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
}

.nm-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 12px 8px;
  overscroll-behavior: contain;
}

.nm-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  color: var(--sidebar-text);
}

.nm-sidebar__footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 16px 16px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.35rem;
}

.nav-link-ctn {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--sidebar-text);
  margin-bottom: 0;
}

.nav-heading {
  margin: 0 0 0.45rem;
  padding: 0 12px;
  border: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--sidebar-section-label);
  display: flex;
  align-items: center;
}

.nav-heading span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.nm-user-links-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.nm-user-links-toggle:hover,
.nm-user-links-toggle:focus-visible {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

.nm-user-links-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

.nm-user-links-toggle .nm-nav-chevron {
  margin-left: auto;
  color: var(--sidebar-icon);
  display: inline-flex;
  transition: transform 180ms ease;
}

.nm-user-links-toggle:not(.collapsed) .nm-nav-chevron {
  transform: rotate(90deg);
}

.nm-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.nm-nav-icon .nm-icon,
aside .nm-icon {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

aside .nav-link,
aside .nav-link-ctn > a.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  height: auto;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

aside .nav-link .nm-nav-label,
aside .nav-link span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

aside .nav-link:hover,
aside .nav-link:focus-visible {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

aside .nav-link:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

aside .nav-link:hover .nm-nav-icon,
aside .nav-link:focus-visible .nm-nav-icon {
  color: var(--sidebar-hover-text);
}

aside .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

aside .nav-link.active .nm-nav-icon,
aside .nav-link.active span {
  color: var(--sidebar-active-icon);
  font-weight: 600;
  background: none;
}

aside .nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-rail);
}

aside.is-collapsed .nav-link.active::before,
html.nm-sidebar-collapsed aside .nav-link.active::before {
  left: -16px;
  top: 10px;
  bottom: 10px;
}

/* Disable old translate hover on icons */
aside nav a:hover svg,
aside nav a:hover .nm-icon {
  transform: none;
  fill: none;
}

.nav-link-wrapper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  width: 100%;
}

.nav-link-wrapper .nav-link {
  flex: 1;
  min-width: 0;
}

.delete-link-btn {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--sidebar-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  padding: 0;
  flex-shrink: 0;
}

.nav-link-wrapper:hover .delete-link-btn,
.nav-link-wrapper:focus-within .delete-link-btn {
  opacity: 1;
}

.delete-link-btn:hover,
.delete-link-btn:focus-visible {
  color: var(--sidebar-active-text);
  background: var(--sidebar-active-bg);
  outline: none;
}

.nm-add-user-link,
#add-user-link-btn {
  border: 0;
  background: transparent;
  color: var(--sidebar-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 0 12px;
  margin: 0.15rem 0 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  border-radius: var(--nm-radius-md, 8px);
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.nm-add-user-link:hover,
#add-user-link-btn:hover,
.nm-add-user-link:focus-visible,
#add-user-link-btn:focus-visible {
  color: var(--sidebar-hover-text);
  background: var(--sidebar-hover-bg);
  outline: none;
}

.nm-add-user-link .nm-nav-icon,
#add-user-link-btn .nm-nav-icon {
  color: inherit;
}

.nm-user-links-empty {
  margin: 0.25rem 12px 0.75rem;
  font-size: 12px;
  color: var(--sidebar-text-muted);
}

#user-links-container {
  overflow: hidden;
  transition:
    max-height 180ms ease,
    opacity 180ms ease;
  max-height: 1000px;
  opacity: 1;
  margin-top: 0.15rem;
}

#user-links-container.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-section--links .nav-heading {
  padding: 0;
  margin-bottom: 0.15rem;
}

/* —— CRM / Nav groups —— */
.nm-nav-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-group__toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.nav-group__toggle:hover,
.nav-group__toggle:focus-visible {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

.nav-group__toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

.nav-group__toggle.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.nav-group__toggle.active .nm-nav-icon,
.nav-group__toggle.active .nm-nav-label {
  color: var(--sidebar-active-icon);
}

.nav-group__toggle.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-rail);
}

.nav-group__toggle .nm-nav-chevron {
  margin-left: auto;
  color: var(--sidebar-icon);
  display: none;
  align-items: center;
}

.nav-group__toggle .nm-nav-chevron .nm-icon {
  width: 16px;
  height: 16px;
}

.nav-group__toggle .nm-nav-chevron--right {
  display: inline-flex;
}

.nm-nav-group.is-open .nav-group__toggle .nm-nav-chevron--right {
  display: none;
}

.nm-nav-group.is-open .nav-group__toggle .nm-nav-chevron--down {
  display: inline-flex;
}

.nav-group__items.nm-subnav {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 180ms ease,
    opacity 180ms ease;
  pointer-events: none;
}

.nm-nav-group.is-open .nav-group__items.nm-subnav {
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
}

.nm-subnav__inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.1rem 0 0.25rem;
}

.nm-subnav__link,
aside .nm-subnav__link.nav-link {
  min-height: 36px;
  height: auto;
  padding: 0 12px 0 44px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-subnav-text);
  gap: 0;
}

.nm-subnav__link:hover,
.nm-subnav__link:focus-visible,
aside .nm-subnav__link.nav-link:hover,
aside .nm-subnav__link.nav-link:focus-visible {
  background: var(--sidebar-subnav-hover-bg);
  color: var(--sidebar-hover-text);
}

.nm-subnav__link.active,
aside .nm-subnav__link.nav-link.active {
  background: var(--sidebar-subnav-active-bg);
  color: var(--sidebar-subnav-active-text);
  font-weight: 600;
}

.nm-subnav__link.active::before,
aside .nm-subnav__link.nav-link.active::before {
  display: none;
}

.nm-crm-flyout {
  position: fixed;
  z-index: 420;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-surface);
  box-shadow: var(--sidebar-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nm-crm-flyout[hidden] {
  display: none !important;
}

.nm-crm-flyout__link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--sidebar-subnav-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.nm-crm-flyout__link:hover,
.nm-crm-flyout__link:focus-visible {
  background: var(--sidebar-subnav-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

.nm-crm-flyout__link.active {
  background: var(--sidebar-subnav-active-bg);
  color: var(--sidebar-subnav-active-text);
  font-weight: 600;
}

aside.is-collapsed .nav-group__toggle,
html.nm-sidebar-collapsed aside .nav-group__toggle {
  justify-content: center;
  padding: 0;
  width: 44px;
  min-height: 44px;
  margin: 0 auto;
}

aside.is-collapsed .nav-group__toggle .nm-nav-label,
aside.is-collapsed .nav-group__toggle .nm-nav-chevron,
aside.is-collapsed .nav-group__items.nm-subnav,
html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-label,
html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-chevron,
html.nm-sidebar-collapsed aside .nav-group__items.nm-subnav {
  display: none;
}

aside.is-collapsed .nav-group__toggle.active::before,
html.nm-sidebar-collapsed aside .nav-group__toggle.active::before {
  left: -16px;
}

/* —— Plan card —— */
.nm-plan-card {
  background: var(--sidebar-card-bg);
  border: 1px solid var(--sidebar-card-border);
  border-radius: 12px;
  box-shadow: var(--sidebar-card-shadow);
  padding: 14px;
}

.nm-plan-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--sidebar-text-muted);
}

.nm-plan-card__marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sidebar-premium-accent);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--sidebar-premium-accent) 22%, transparent);
  flex-shrink: 0;
}

.nm-plan-card__name {
  margin: 0 0 0.75rem;
  font-size: 15px;
  font-weight: 650;
  color: var(--sidebar-text);
  line-height: 1.3;
  word-break: break-word;
}

.nm-plan-card__progress {
  width: 100%;
  height: 5px;
  border-radius: var(--nm-radius-pill, 999px);
  background: var(--sidebar-progress-track);
  overflow: hidden;
  margin-bottom: 0.45rem;
}

.nm-plan-card__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--sidebar-progress-fill);
  transition: width 180ms ease;
}

.nm-plan-card__progress-fill.is-ready {
  width: var(--nm-plan-progress, 0%);
}

.nm-plan-card[data-usage-tone="high"] .nm-plan-card__progress-fill {
  background: #fc8f4f;
}

.nm-plan-card[data-usage-tone="full"] .nm-plan-card__progress-fill {
  background: var(--nm-brand);
}

.nm-plan-card__usage,
.nm-plan-card__limit-note {
  margin: 0 0 0.85rem;
  font-size: 12px;
  color: var(--sidebar-text-muted);
}

.nm-plan-card__limit-note {
  margin-top: -0.55rem;
}

.nm-plan-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--sidebar-card-border);
  background: var(--sidebar-surface);
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.nm-plan-card__btn .nm-nav-icon {
  color: var(--sidebar-icon);
  width: 16px;
  height: 16px;
}

.nm-plan-card__btn .nm-icon {
  width: 16px;
  height: 16px;
}

.nm-plan-card__btn:hover,
.nm-plan-card__btn:focus-visible {
  background: var(--sidebar-hover-bg);
  outline: none;
}

.nm-plan-card__btn:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

.nm-plan-card__compact {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--sidebar-card-border);
  background: var(--sidebar-card-bg);
  color: var(--sidebar-icon);
  box-shadow: var(--sidebar-card-shadow);
  text-decoration: none;
}

.nm-plan-card__compact:hover,
.nm-plan-card__compact:focus-visible {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  outline: none;
}

.nm-plan-card__compact:focus-visible {
  box-shadow: 0 0 0 3px var(--sidebar-focus-ring);
}

.nm-plan-card__compact-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sidebar-premium-accent);
}

/* —— Collapsed desktop —— */
aside.is-collapsed .nav-heading,
html.nm-sidebar-collapsed aside .nav-heading {
  display: none;
}

aside.is-collapsed .nav-section--links .nav-heading,
html.nm-sidebar-collapsed aside .nav-section--links .nav-heading {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

aside.is-collapsed .nm-user-links-toggle,
html.nm-sidebar-collapsed aside .nm-user-links-toggle {
  justify-content: center;
  padding: 0;
  width: 44px;
  margin: 0 auto;
}

aside.is-collapsed .nm-nav-label,
aside.is-collapsed .nm-nav-chevron,
aside.is-collapsed .nm-user-links-toggle .custom-link,
aside.is-collapsed .nm-user-links-toggle .nm-nav-chevron,
aside.is-collapsed #add-user-link-btn,
aside.is-collapsed .nm-user-links-empty,
aside.is-collapsed #user-links-container,
aside.is-collapsed .nm-plan-card__expanded,
html.nm-sidebar-collapsed aside .nm-nav-label,
html.nm-sidebar-collapsed aside .nm-nav-chevron,
html.nm-sidebar-collapsed aside .nm-user-links-toggle .custom-link,
html.nm-sidebar-collapsed aside .nm-user-links-toggle .nm-nav-chevron,
html.nm-sidebar-collapsed aside #add-user-link-btn,
html.nm-sidebar-collapsed aside .nm-user-links-empty,
html.nm-sidebar-collapsed aside #user-links-container,
html.nm-sidebar-collapsed aside .nm-plan-card__expanded {
  display: none;
}

aside.is-collapsed .nm-plan-card,
html.nm-sidebar-collapsed aside .nm-plan-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

aside.is-collapsed .nm-plan-card__compact,
html.nm-sidebar-collapsed aside .nm-plan-card__compact {
  display: inline-flex;
}

aside.is-collapsed .nm-sidebar__scroll,
html.nm-sidebar-collapsed aside .nm-sidebar__scroll {
  padding: 4px 8px 8px;
}

aside.is-collapsed .nav-section,
html.nm-sidebar-collapsed aside .nav-section {
  margin-bottom: 0.65rem;
  gap: 0.2rem;
}

aside.is-collapsed .nav-link,
html.nm-sidebar-collapsed aside .nav-link {
  justify-content: center;
  padding: 0;
  width: 44px;
  min-height: 44px;
  margin: 0 auto;
}

aside.is-collapsed .nm-sidebar__footer,
html.nm-sidebar-collapsed aside .nm-sidebar__footer {
  padding: 8px 10px 14px;
}

/* Tooltips when collapsed */
aside.is-collapsed .nav-link[data-tooltip],
aside.is-collapsed .nm-user-links-toggle[data-tooltip],
aside.is-collapsed .nm-plan-card__compact[data-tooltip],
html.nm-sidebar-collapsed aside .nav-link[data-tooltip],
html.nm-sidebar-collapsed aside .nm-user-links-toggle[data-tooltip],
html.nm-sidebar-collapsed aside .nm-plan-card__compact[data-tooltip] {
  position: relative;
}

aside.is-collapsed .nav-link[data-tooltip]::after,
aside.is-collapsed .nm-user-links-toggle[data-tooltip]::after,
aside.is-collapsed .nm-plan-card__compact[data-tooltip]::after,
html.nm-sidebar-collapsed aside .nav-link[data-tooltip]::after,
html.nm-sidebar-collapsed aside .nm-user-links-toggle[data-tooltip]::after,
html.nm-sidebar-collapsed aside .nm-plan-card__compact[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--sidebar-surface);
  color: var(--sidebar-text);
  border: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-card-shadow);
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 400;
  transition: opacity 120ms ease;
}

aside.is-collapsed .nav-link[data-tooltip]:hover::after,
aside.is-collapsed .nav-link[data-tooltip]:focus-visible::after,
aside.is-collapsed .nm-user-links-toggle[data-tooltip]:hover::after,
aside.is-collapsed .nm-user-links-toggle[data-tooltip]:focus-visible::after,
aside.is-collapsed .nm-plan-card__compact[data-tooltip]:hover::after,
aside.is-collapsed .nm-plan-card__compact[data-tooltip]:focus-visible::after,
html.nm-sidebar-collapsed aside .nav-link[data-tooltip]:hover::after,
html.nm-sidebar-collapsed aside .nav-link[data-tooltip]:focus-visible::after,
html.nm-sidebar-collapsed
  aside
  .nm-user-links-toggle[data-tooltip]:hover::after,
html.nm-sidebar-collapsed
  aside
  .nm-user-links-toggle[data-tooltip]:focus-visible::after,
html.nm-sidebar-collapsed
  aside
  .nm-plan-card__compact[data-tooltip]:hover::after,
html.nm-sidebar-collapsed
  aside
  .nm-plan-card__compact[data-tooltip]:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  aside,
  aside.nm-sidebar,
  .db-container,
  .nm-sidebar-backdrop,
  .nm-plan-card__progress-fill,
  #user-links-container,
  .nm-user-links-toggle .nm-nav-chevron,
  .nm-sidebar-collapse .nm-icon,
  .nm-sidebar-logo,
  .nav-group__items.nm-subnav,
  #user-links-container {
    transition: none !important;
  }
}

@media (max-width: 1024px) {
  .nm-sidebar-backdrop {
    z-index: 280;
  }

  aside,
  aside.nm-sidebar,
  aside.is-collapsed,
  html.nm-sidebar-collapsed aside,
  html.nm-sidebar-collapsed aside.nm-sidebar {
    top: 0;
    width: min(280px, calc(100vw - 32px));
    height: 100dvh;
    height: 100vh;
    z-index: 300;
    transform: translateX(-105%);
  }

  aside.active,
  aside.nm-sidebar.active {
    transform: translateX(0);
  }

  #sidebarCollapseBtn {
    display: none;
  }

  /* Mobile always shows expanded chrome, ignore desktop collapse visuals */
  aside.is-collapsed .nm-sidebar__brand,
  html.nm-sidebar-collapsed aside .nm-sidebar__brand {
    flex-direction: row;
    height: 74px;
    min-height: 72px;
    padding: 20px 18px 8px 20px;
    align-items: center;
  }

  aside.is-collapsed .nm-sidebar-logo-stack,
  html.nm-sidebar-collapsed aside .nm-sidebar-logo-stack {
    width: 130px;
    height: 28px;
  }

  aside.is-collapsed .nm-sidebar-logo--full.nm-sidebar-logo--on-light,
  html.nm-sidebar-collapsed
    aside
    .nm-sidebar-logo--full.nm-sidebar-logo--on-light {
    opacity: 1;
    pointer-events: auto;
  }

  html[data-theme="dark"]
    aside.is-collapsed
    .nm-sidebar-logo--full.nm-sidebar-logo--on-light,
  html[data-theme="dark"].nm-sidebar-collapsed
    aside
    .nm-sidebar-logo--full.nm-sidebar-logo--on-light {
    opacity: 0;
    pointer-events: none;
  }

  html[data-theme="dark"]
    aside.is-collapsed
    .nm-sidebar-logo--full.nm-sidebar-logo--on-dark,
  html[data-theme="dark"].nm-sidebar-collapsed
    aside
    .nm-sidebar-logo--full.nm-sidebar-logo--on-dark {
    opacity: 1;
    pointer-events: auto;
  }

  aside.is-collapsed .nm-sidebar-logo--mark,
  html.nm-sidebar-collapsed aside .nm-sidebar-logo--mark {
    opacity: 0 !important;
    pointer-events: none;
  }

  aside.is-collapsed .nav-group__toggle,
  html.nm-sidebar-collapsed aside .nav-group__toggle {
    justify-content: flex-start;
    width: 100%;
    padding: 0 12px;
    margin: 0;
  }

  aside.is-collapsed .nav-group__toggle .nm-nav-label,
  aside.is-collapsed .nav-group__toggle .nm-nav-chevron--right,
  html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-label,
  html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-chevron--right {
    display: inline-flex;
  }

  aside.is-collapsed
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--right,
  html.nm-sidebar-collapsed
    aside
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--right {
    display: none;
  }

  aside.is-collapsed
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--down,
  html.nm-sidebar-collapsed
    aside
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--down {
    display: inline-flex;
  }

  aside.is-collapsed .nav-group__items.nm-subnav,
  html.nm-sidebar-collapsed aside .nav-group__items.nm-subnav {
    display: block;
  }

  .nm-crm-flyout {
    display: none !important;
  }

  aside.is-collapsed .nav-heading,
  html.nm-sidebar-collapsed aside .nav-heading {
    display: flex;
  }

  aside.is-collapsed .nm-nav-label,
  aside.is-collapsed .nm-plan-card__expanded,
  aside.is-collapsed #user-links-container:not(.collapsed),
  html.nm-sidebar-collapsed aside .nm-nav-label,
  html.nm-sidebar-collapsed aside .nm-plan-card__expanded {
    display: initial;
  }

  aside.is-collapsed .nm-user-links-toggle .nm-nav-chevron,
  html.nm-sidebar-collapsed aside .nm-user-links-toggle .nm-nav-chevron {
    display: inline-flex;
  }

  aside.is-collapsed .nav-group__toggle .nm-nav-chevron--down,
  html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-chevron--down {
    display: none;
  }

  aside.is-collapsed .nav-group__toggle .nm-nav-chevron--right,
  html.nm-sidebar-collapsed aside .nav-group__toggle .nm-nav-chevron--right {
    display: inline-flex;
  }

  aside.is-collapsed
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--right,
  html.nm-sidebar-collapsed
    aside
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--right {
    display: none;
  }

  aside.is-collapsed
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--down,
  html.nm-sidebar-collapsed
    aside
    .nm-nav-group.is-open
    .nav-group__toggle
    .nm-nav-chevron--down {
    display: inline-flex;
  }

  aside.is-collapsed #user-links-container.collapsed,
  html.nm-sidebar-collapsed aside #user-links-container.collapsed {
    display: block;
    max-height: 0;
    opacity: 0;
  }

  aside.is-collapsed #user-links-container:not(.collapsed),
  html.nm-sidebar-collapsed aside #user-links-container:not(.collapsed) {
    display: block;
    max-height: 1000px;
    opacity: 1;
    pointer-events: auto;
  }

  aside.is-collapsed .nm-user-links-toggle,
  aside.is-collapsed .nav-link,
  html.nm-sidebar-collapsed aside .nm-user-links-toggle,
  html.nm-sidebar-collapsed aside .nav-link {
    justify-content: flex-start;
    width: 100%;
    padding: 0 12px;
    margin: 0;
  }

  aside.is-collapsed .nm-plan-card,
  html.nm-sidebar-collapsed aside .nm-plan-card {
    padding: 14px;
    border: 1px solid var(--sidebar-card-border);
    background: var(--sidebar-card-bg);
    box-shadow: var(--sidebar-card-shadow);
  }

  aside.is-collapsed .nm-plan-card__compact,
  html.nm-sidebar-collapsed aside .nm-plan-card__compact {
    display: none;
  }

  aside.is-collapsed .nm-add-user-link,
  aside.is-collapsed #add-user-link-btn,
  html.nm-sidebar-collapsed aside .nm-add-user-link,
  html.nm-sidebar-collapsed aside #add-user-link-btn {
    display: flex;
  }

  aside.is-collapsed .nav-link[data-tooltip]::after,
  aside.is-collapsed .nm-user-links-toggle[data-tooltip]::after,
  aside.is-collapsed .nm-plan-card__compact[data-tooltip]::after,
  html.nm-sidebar-collapsed aside .nav-link[data-tooltip]::after,
  html.nm-sidebar-collapsed aside .nm-user-links-toggle[data-tooltip]::after,
  html.nm-sidebar-collapsed aside .nm-plan-card__compact[data-tooltip]::after {
    display: none;
  }

  aside.is-collapsed .nav-link.active::before,
  html.nm-sidebar-collapsed aside .nav-link.active::before {
    left: -12px;
  }

  aside.is-collapsed .nm-sidebar__scroll,
  html.nm-sidebar-collapsed aside .nm-sidebar__scroll {
    padding: 4px 12px 8px;
  }

  aside.is-collapsed .nm-sidebar__footer,
  html.nm-sidebar-collapsed aside .nm-sidebar__footer {
    padding: 12px 16px 16px;
  }
}

/* -----------------------------

            Stile Footer 
            
---------------------------------*/

footer {
  grid-area: footer;
  display: none;
  z-index: 999;
}

footer a {
  display: flex;
  flex-direction: column;
  color: var(--light-bg);
  align-items: center;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  footer {
    grid-area: footer;
    display: flex;
    background-color: var(--accent);
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }

  main section {
    padding-bottom: 4rem;
  }

  #sendFeedbackBtn {
    bottom: auto;
    right: auto;
  }
}

/* -----------------------------

            Stile Hauptbereich 
            
---------------------------------*/

main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  z-index: 0;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--app-page-bg, var(--surface-page));
}

.w-sidebar {
  grid-area: main;
  display: flex;
  flex-direction: column;
  z-index: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--surface-page);
}

.site-header {
  grid-area: unset;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background-color: var(--surface-card);
  position: relative;
  top: auto;
  height: var(--site-header-h);
  min-height: var(--site-header-h);
  flex-shrink: 0;
  justify-content: flex-start;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 50;
}

.site-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-title h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.site-title svg {
  display: block;
  fill: var(--light-text);
  background-color: var(--accent);
  padding: 0.3rem;
  height: 100%;
  width: 45px;
  border-radius: 50%;
}

.site-header h4 {
  font-size: 1.5rem;
  font-weight: 400;
}

.site-header h4 a {
  font-size: 1.5rem;
  color: var(--accent);
}

.site-header h4 a:hover {
  text-decoration: underline;
}

section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) min(3%, var(--space-5));
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  max-width: var(--content-max);
  width: 100%;
  min-width: 0;
  align-content: flex-start;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-color: var(--surface-page);
}

.no-height {
  max-height: unset;
}

.blank {
  background-color: inherit;
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--light-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  gap: var(--space-4);
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.row {
  flex-direction: row !important;
}

.column {
  flex-direction: column !important;
}

.items-center {
  align-items: center !important;
}

.items-left {
  align-items: flex-start !important;
}

.justify-center {
  justify-content: center;
}

.justify-left {
  justify-content: left;
}

.flex20 {
  flex: 0 1 calc(20% - 0.7rem);
  min-width: 250px;
}

.flex30 {
  flex: 0 1 calc(30% - 0.7rem);
  min-width: 250px;
}

.flex33 {
  flex: 0 1 calc(33.333% - 0.7rem);
  min-width: 250px;
}

.flex40 {
  flex: 0 1 calc(40% - 0.7rem);
  min-width: 250px;
}

.flex50 {
  flex: 0 1 calc(50% - 0.7rem);
  min-width: 250px;
}

.flex60 {
  flex: 0 1 calc(60% - 0.7rem);
  min-width: 250px;
}

.flex70 {
  flex: 0 1 calc(70% - 0.7rem);
  min-width: 250px;
}

.flex100 {
  flex: 0 1 100%;
  min-width: 250px;
}

@media (max-width: 1930px) {
  .flex20,
  .flex30,
  .flex33,
  .flex40,
  .flex50 {
    flex: 0 1 calc(50% - 0.7rem);
  }

  .flex60,
  .flex70,
  .flex100 {
    flex: 1 1 100%;
  }
}

@media (max-width: 1130px) {
  section {
    max-height: unset;
    max-width: unset;
  }
}

@media (max-width: 1024px) {
  .content-wrapper {
    padding: 50px 0.5rem 100px 0.5rem;
  }

  .site-header {
    width: 100%;
    height: var(--site-header-h);
  }

  .site-header h1 {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .flex20,
  .flex30,
  .flex33,
  .flex40,
  .flex50,
  .flex60,
  .flex70,
  .flex100 {
    flex: 0 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  .site-header h4 {
    font-size: 1rem;
    font-weight: 400;
  }

  .site-header h4 a {
    font-size: 1rem;
    color: var(--accent);
  }
}

/* -----------------------------

            Formulare
            
---------------------------------*/
.form-box,
#task-form,
form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.form-box {
  border: 1px solid var(--light-bg);
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 2rem 1rem;
}

.input-ctn {
  display: flex;
  width: 100%;
  gap: 1.5rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
}

.form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 50%;
  gap: 0.5rem;
}

.filter-field {
  min-width: 0;
  flex: 1 1 10rem;
  width: auto;
  max-width: 200px;
}

.plz {
  flex: unset;
  width: 20%;
  min-width: 120px;
}

/* Custom Stile für Select Menüs */
.custom-select {
  position: relative;
  font-family: var(--font-1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.custom-select select {
  display: none;
}

.custom-select-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.select-selected {
  position: relative;
  background-color: #fff;
  border-radius: var(--light-radius);
  border: 1px solid var(--highlighted-bg);
  height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  width: 100%;
}

.select-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
  background-color: white;
  height: 100%;
}

.select-arrow svg {
  fill: var(--accent);
  transition: transform 0.3s;
  display: block;
  width: 21px;
  height: 21px;
}

.select-text {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

.select-arrow.open svg {
  transform: rotate(180deg);
}

.select-arrow-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.select-items div,
.select-selected {
  color: var(--accent);
  padding: calc(0.5rem + 0.5px) 1rem;
  cursor: pointer;
}

.select-items div {
  border-bottom: 1px solid rgba(217, 217, 217, 0.333);
  max-width: 100%;
}

.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.1s linear;
  pointer-events: none;
  width: 100%;
}

.select-items.open {
  max-height: 200px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--highlighted-bg);
  border-top: 0;
  overflow: auto;
}

.select-items div:hover,
.same-as-selected {
  background-color: var(--light-bg);
  color: var(--accent) !important;
}

/* Custom Stile für Select Menüs ENDE */
.readonly-input {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
  width: 100%;
  background: none;
  border: 1px solid var(--border-subtle);
  padding: calc(0.5rem + 0.5px) 1rem;
  border-radius: var(--light-radius);
  font-size: 1rem;
  font-weight: 400;
  background-color: var(--surface-card);
  min-height: 38px;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}

textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus {
  color: var(--dark-text);
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--nm-danger-soft);
}

/* Custom Stile für Color Picker */
.custom-color-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 50px;
  height: 38px;
}

.custom-color-picker input[type="color"] {
  opacity: 0;
  width: 38px;
  height: 38px;
  position: absolute;
  cursor: pointer;
  margin: 0;
  z-index: 2;
}

.custom-color-picker .color-preview {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 1;
  transition: all 0.3s ease;
}

.custom-color-picker:hover .color-preview {
  border: 1px solid #444;
}

/* Custom Stile für Color Picker ENDE */
/* Custom Stile für File Uploads */
.custom-file-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.custom-file-upload input[type="file"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 140px;
  cursor: pointer;
  z-index: 2;
}

.custom-file-upload .file-name {
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom Stile für File Uploads ENDE */

textarea {
  resize: none;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--highlighted-bg);
  border-radius: var(--light-radius);
}

.dsgvo-check label {
  display: flex;
  gap: 1rem;
}

.dsgvo-check label p,
.dsgvo-check label p a {
  font-size: 0.8rem;
  text-align: left;
}

::placeholder {
  color: var(--placeholder-text);
}

/* Individuelles Styling Checkboxen */
.custom-checkbox {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  position: relative;
  gap: 1rem;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: relative;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
  background-color: white;
  border: 2px solid var(--accent, #555);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.custom-checkbox:hover .checkmark {
  box-shadow: 0 0 5px var(--accent);
}

.custom-checkbox input:checked + .checkmark::after {
  position: absolute;
  content: "";
  display: flex;
  top: 2px;
  left: 2px;
  height: 10px;
  width: 10px;
  background-color: var(--accent, #555);
  border-radius: 50%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .input-ctn {
    flex-direction: column;
  }

  .small-inputs {
    flex-direction: row;
  }

  .form-field {
    width: 100%;
    align-items: flex-start;
  }

  textarea {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .input-ctn {
    flex-direction: column;
  }

  .small-inputs {
    flex-direction: row;
  }

  .form-field {
    width: 100%;
    align-items: flex-start;
  }

  textarea {
    width: 100%;
  }
}

/* -----------------------------

            Modale & Pop-Ups
            
---------------------------------*/

.modal {
  display: none;
  position: fixed;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--z-modal, 1400);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 1rem 0;
  background-color: rgba(77, 77, 77, 0.629);
}

.confetti-modal {
  display: none;
  position: fixed;
  align-items: center;
  z-index: var(--z-modal, 1400);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 2rem;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 4rem 2rem;
  background-color: var(--white);
  width: min(600px, calc(100vw - 2rem));
  max-width: 600px;
  min-width: unset;
  max-height: calc(100vh - 2rem);
  position: relative;
  border-radius: var(--light-radius);
  gap: 1rem;
  box-shadow: var(--shadow);
  overflow-x: auto;
  overflow-y: auto;
  z-index: 10000;
}

.modal-content .btn-ctn {
  align-items: center;
  justify-content: center;
}

.modal-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

.modal-heading svg,
.modal-content h2 svg,
.modal-content h3 svg,
.modal-content h4 svg {
  stroke: var(--accent);
  width: 30px;
  height: 30px;
}

.modal-heading h4 {
  text-align: center;
}

.modal-heading h4 span {
  color: var(--accent);
  font-size: inherit;
}

.modal-content p {
  text-align: center;
}
.close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-bg);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

.close-x svg {
  width: 18px;
  height: 18px;
  fill: var(--accent);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.close-x svg:hover {
  fill: var(--accent);
  transform: rotate(90deg);
}

.help-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-bg);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  cursor: pointer;
}

.help-btn img {
  width: 10px;
  height: 10px;
}

.help-btn:hover {
  box-shadow: 0 0 8px white;
}

.upgrade-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.upgrade-modal-content img {
  width: 100%;
  max-width: 200px;
}

.upgrade-modal-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}

.upgrade-modal-text ul {
  background-color: var(--light-bg);
  padding: 1rem;
  border-radius: var(--light-radius);
  box-shadow: var(--shadow);
}

.upgrade-modal h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.upgrade-modal p {
  text-align: center;
}

.upgrade-modal h3 svg {
  fill: var(--accent);
  display: block;
  width: 35px;
  height: 35px;
}

@media (max-width: 1024px) {
  .help-btn {
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 3rem 1.5rem;
    background-color: var(--white);
    width: calc(100vw - 2rem);
    max-width: unset;
    min-width: unset;
    max-height: calc(100vh - 2rem);
    position: relative;
    border-radius: var(--nm-radius-md, 8px);
    gap: 1rem;
    box-shadow: var(--shadow);
  }

  .upgrade-modal-content img {
    width: 70%;
    max-width: 100px;
    align-self: center;
  }
}

/* -----------------------------

            Tabs
            
---------------------------------*/
.tabs-ctn {
  display: flex;
  gap: 1rem;
}

.vertical-tabs-ctn {
  display: flex;
  padding: 2rem 1rem;
  width: 100%;
}

.tab {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nm-border, rgba(128, 128, 128, 0.2));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--nm-radius-md, var(--light-radius));
  background: var(--nm-surface-sunken, var(--light-bg));
}

.vertical-tab-box {
  display: flex;
  width: 50%;
  gap: 1rem;
  background-color: var(--nm-surface-raised, white);
  border-radius: var(--nm-radius-md, var(--light-radius));
  box-shadow: var(--nm-shadow-sm, var(--shadow));
  min-width: 700px;
  max-width: 800px;
}

.vertical-tab {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--nm-border, rgba(128, 128, 128, 0.2));
  min-height: 600px;
  min-width: 200px;
}

.vertical-tab button,
.tab button {
  float: left;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 1rem;
  background-color: transparent;
  color: var(--nm-text, var(--dark-text));
}

.vertical-tab button:first-child {
  border-top-left-radius: 10px;
}

.vertical-tab button {
  max-height: 50px;
}

.vertical-tab button:hover,
.tab button:hover {
  border: 1px solid var(--nm-border-strong, var(--dark-bg));
  background-color: var(--nm-surface-raised, var(--light-bg));
}

.tablinks {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
}

.tablinks svg {
  stroke: currentColor;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--nm-text, var(--dark-text));
}

.vertical-tab button.active,
.tab button.active {
  background-color: var(--nm-brand, var(--accent));
  border: none;
  color: var(--nm-text-inverse, var(--light-text));
}

.vertical-tab button.active span,
.tab button.active span {
  color: var(--nm-text-inverse, var(--light-text));
}

.vertical-tab button.active svg,
.tab button.active svg {
  stroke: var(--nm-text-inverse, var(--light-text));
  color: var(--nm-text-inverse, var(--light-text));
}

.tabcontent {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: none;
  width: 100%;
  gap: 1rem;
}

.tabcontent {
  animation: fadeEffect 1s;
}

.vertical-tabs-ctn .tabcontent {
  justify-content: flex-start;
  gap: 1rem;
}

.tab-ctn {
  display: flex;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

.tab-box {
  display: flex;
  flex-direction: column;
  background-color: var(--light-bg);
  min-width: 350px;
  max-width: 350px;
  padding: 2rem 1rem;
  border-radius: var(--light-radius);
  box-shadow: var(--shadow);
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1385px) {
  .tab-box {
    min-width: unset;
    width: calc(50% - 0.5rem);
    max-width: unset;
  }
}

@media (max-width: 1024px) {
  .vertical-tab-box {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .vertical-tab {
    min-height: unset;
  }
}

@media (max-width: 768px) {
  .vertical-tab-box {
    flex-direction: column;
    min-height: unset;
    min-width: 100%;
  }

  .vertical-tab {
    flex-direction: row;
    min-height: unset;
    min-width: unset;
  }
}

@media (max-width: 768px) {
  .tab-box {
    width: 100%;
    min-width: unset;
  }

  .tablinks span {
    display: none;
  }

  .tablinks {
    justify-content: center;
  }
}

/* -----------------------------

            Login/Register 
            
---------------------------------*/

.login-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 2rem 10px;
  background: var(--light-gradient-bg);
  gap: 5rem;
}

.log-reg-content-ctn {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1rem;
}

.login-logo-ctn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.login-logo-ctn img {
  width: 100%;
  max-width: 400px;
}

.login-register-ctn {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--light-radius);
  padding: 0.5rem;
  padding-top: 2rem;
  width: 100%;
  min-height: 464px;
  max-width: 480px;
  box-shadow: var(--shadow);
  text-align: center;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.login-register-ctn form {
  width: 100%;
  max-width: 326px;
}

.login-register-ctn h1 {
  font-weight: 500;
  font-size: 2rem;
}

.input-box {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.input-box input {
  border: none;
  border-bottom: 1px solid var(--dark-bg);
  border-radius: 0;
  color: var(--dark-text);
}

.input-box svg {
  position: absolute;
  fill: var(--accent);
  right: 0;
  right: 1rem;
  width: 1.275rem;
}

.remember-forgot {
  display: flex;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
}

.remember-forgot button {
  display: flex;
  font-size: 1rem;
  color: var(--accent);
  cursor: pointer;
}

.remember-forgot button:hover {
  text-decoration: underline;
}

.register-link-ctn {
  display: flex;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  height: 100px;
  width: 100%;
}

.register-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.login-links-ctn {
  display: flex;
  gap: 2rem;
}

/* Individuelles Styling Login */

.login-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--dark-gradient-bg);
  border-radius: var(--light-radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 300px;
}

.login-cta-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-cta-content h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-2);
  max-width: 150px;
  padding: 0.5rem 0.3rem;
  color: var(--dark-text);
  font-size: 1rem;
  border-radius: var(--light-radius);
}

.login-cta-content h2 {
  font-weight: 400;
  font-size: 2rem;
  color: var(--light-bg);
}

.login-cta-content p {
  color: var(--light-bg);
}

.login-cta-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90% !important;
  max-width: 250px;
}

.login-cta-icon {
  position: absolute;
  top: -35px;
  right: -30px;
  width: 80px !important;
  z-index: 2;
}

/* Individuelles Styling Register */

.register-ctn {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--light-radius);
  padding: 0.5rem;
  padding-top: 2rem;
  width: 100%;
  min-height: 464px;
  max-width: 500px;
  box-shadow: var(--shadow);
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

.register-ctn h1 {
  font-size: 2rem;
  padding: 0 2rem;
}

#registerForm {
  padding: 0 2rem;
}

.register-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--dark-gradient-bg);
  border-radius: var(--light-radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
}

.register-cta-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.register-cta-content h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--light-text);
}

.register-bullet-points {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--light-text);
}

.register-bullet-points .bullet-point h6 {
  color: var(--light-text);
}

.register-bullet-points .bullet-point svg {
  fill: var(--accent-2);
}

.register-cta-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90% !important;
  max-width: 340px;
}

.register-cta-icon {
  position: absolute;
  top: -35px;
  right: -30px;
  width: 80px !important;
  z-index: 2;
}

@media (max-width: 1277px) {
  .register-cta-icon {
    top: -25px;
    right: 0;
    width: 60px !important;
  }
}

@media (max-width: 991px) {
  .login-cta-icon {
    top: -20px;
    right: 0;
    width: 60px !important;
  }

  .register-cta {
    max-width: 300px;
  }

  .register-cta-img {
    max-width: 180px;
  }
}

@media (max-width: 768px) {
  .login-cta-icon {
    top: -20px;
    right: 0;
  }

  .log-reg-content-ctn {
    flex-direction: column;
    align-items: center;
  }

  .login-cta {
    max-width: 480px;
    height: 230px;
    justify-content: center;
  }

  .login-cta-img {
    max-width: 150px;
  }

  .login-cta-icon {
    top: 10px;
    right: 10px;
    width: 50px !important;
  }

  .login-cta-content p {
    width: 50%;
  }

  .register-cta {
    max-width: 700px;
    width: 100%;
  }

  .register-bullet-points {
    width: 60%;
  }

  .register-cta-content h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .login-ctn {
    gap: 3rem;
  }

  .login-cta-icon {
    top: -20px;
    right: 0;
  }

  .log-reg-content-ctn {
    flex-direction: column;
    align-items: center;
  }

  .login-cta {
    max-width: 480px;
    height: auto;
  }

  .login-cta-img {
    max-width: 50%;
    max-width: 150px;
  }

  .login-cta-icon {
    top: 10px;
    right: 10px;
    width: 50px !important;
  }

  .register-cta {
    padding: 0;
  }

  .register-bullet-points {
    width: 100%;
    padding: 2rem 2rem 0 2rem;
  }

  .register-cta-content h2 {
    font-size: 1.5rem;
    padding: 2rem 2rem 0 2rem;
  }

  .register-cta-img {
    position: static;
    align-self: flex-end;
  }

  .login-logo-ctn img {
    max-width: 200px;
  }
}

@media (max-width: 355px) {
  .login-cta-img {
    max-width: 50%;
    max-width: 120px;
  }

  .login-cta-content p {
    width: 60%;
  }
}

/* -----------------------------

/* -----------------------------

            Tabellen
            
---------------------------------*/

.delete-plugin-btn.not-allowed {
  cursor: not-allowed;
}

.delete-plugin-btn {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.delete-plugin-btn:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* -----------------------------

    Benachrichtigungen / Toasts
            
---------------------------------*/

.toast {
  position: fixed;
  top: 12px;
  right: 12px;
  background-color: var(--nm-surface-overlay, var(--dark-bg));
  color: var(--nm-text-inverse, var(--light-text));
  padding: 1rem 1.15rem 1.15rem;
  border-radius: var(--nm-radius-md, var(--light-radius));
  z-index: 10000;
  opacity: 1;
  min-width: 220px;
  max-width: min(420px, calc(100vw - 24px));
  box-shadow: var(--nm-shadow-lg, var(--shadow));
  overflow: hidden;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0%;
  background: var(--accent);
  transition: width 3s linear;
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}

/* .toast.fade-out entfernt 2026-07-23 (Toast nutzt Inline-Opacity) */

/* Meldungen in Formularen */
.notification-box {
  display: flex;
  flex-direction: column;
}

/* -----------------------------

    Stile Zeiterfassung
            
---------------------------------*/

.control-ctn form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  flex-wrap: wrap;
}

.time-filter-form .custom-select {
  flex: 1 1 10rem;
  max-width: 200px;
  min-width: min(10rem, 100%);
}

.time-filter-form input[type="date"] {
  flex: 1 1 9rem;
  max-width: 160px;
  min-width: min(9rem, 100%);
  width: auto;
}

.time-filter-form label {
  flex: 0 0 auto;
  font-size: 0.9rem;
  white-space: nowrap;
}

.time-filter-form .normal-btn,
.time-filter-form .normal-btn-2 {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
}

.control-ctn .form-field {
  flex-direction: row;
  align-items: center;
}

@media (max-width: 768px) {
  .time-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .time-filter-form > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .time-filter-form .custom-select,
  .time-filter-form input[type="date"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .time-filter-form label {
    flex: 1 1 100%;
    margin-top: 0.15rem;
  }

  .time-filter-form .normal-btn,
  .time-filter-form .normal-btn-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
  }

  .btn-ctn .form-field {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .control-ctn .choices,
  .page-header .choices {
    max-width: 100%;
  }
}

.control-ctn h5 {
  display: flex;
  gap: 0.5rem;
}

.total-hours {
  display: flex;
  justify-content: space-between;
}

.total-hours h6 {
  font-size: 1rem;
}

/* stopwatch / timer-btn entfernt 2026-07-23 (keine Markup-/JS-Referenz) */

/* -----------------------------

    Stile Diagramme
            
---------------------------------*/

.chart-ctn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 400px;
}

.chart-ctn #startSummaryChart {
  max-height: 100px;
}

canvas {
  width: 100%;
  height: 400px;
}

/* Dashboard-Charts dürfen nicht von der globalen canvas-Regel aufgeblasen werden */
.nm-dash canvas,
.dashboard-page canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

/* -------------------------------------------

    Stile Einstellungen für Unternehmensprofil
            
-----------------------------------------------*/
.info-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-box ul li {
  border-bottom: 1px solid var(--highlighted-bg);
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-box ul li svg {
  cursor: pointer;
}

.info-box ul li svg:hover {
  stroke: var(--dark-text);
}

.info-box ul li img {
  max-width: 100px;
}

.info-box .danger-zone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  border: 1px dashed var(--warning);
  padding: 2rem 1rem;
}

.settings-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.settings-box h6 {
  width: 100%;
  border-bottom: 1px solid var(--highlighted-bg);
}

.settings-box button {
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  transition: all 0.3s ease;
}

.settings-box button span {
  transition: all 0.3s ease;
}

.settings-box button:hover span {
  color: var(--accent);
  transition: all 0.3s ease;
}

.settings-box button svg {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.settings-box button:hover svg {
  transform: translate(3px);
}

.settings-logo-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 2rem 1rem;
  gap: 1rem;
}

.settings-logo-ctn img {
  width: 100%;
  max-width: 300px;
}

.settings-logo-ctn .modal-btn-ctn button svg {
  fill: var(--light-text);
}

.settings-logo-ctn .modal-btn-ctn button:hover svg {
  transform: none;
  fill: var(--accent-2);
}

#displayAccountingLink:empty,
#displayAccountingLink.no-link {
  color: var(--placeholder-text);
  font-style: italic;
}

/* -----------------------------

    Stile Einstellungsseite
            
---------------------------------*/

/* Button Slider Dunkler Modus */

.checkbox-group {
  display: flex;
  flex-direction: column;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 1rem;
  gap: 1rem;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--highlighted-bg);
  padding: 0.5rem 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Buttons Farbschema */

.color-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.color-btn:hover {
  transform: translateY(-2px);
}

.default {
  background-color: rgb(171, 76, 255);
}

.red {
  background-color: rgb(226, 33, 33);
}

.blue {
  background-color: rgb(0, 98, 255);
}

.green {
  background-color: rgb(8, 222, 8);
}

/* -----------------------------

        Stile CRM
            
---------------------------------*/

/* Kontakte-Tabelle */

.table-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.table-header span {
  color: var(--light-text);
}

.sort-icons {
  display: flex;
  align-items: center;
}

.sort-icons svg {
  display: inline-block;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  fill: gray;
  cursor: pointer;
  transform: rotate(0deg);
}

.sort-icons.asc svg {
  transform: rotate(0deg);
  fill: var(--accent);
}

.sort-icons.desc svg {
  transform: rotate(-180deg);
  fill: var(--accent);
}

.table-ctn table button {
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

.table-ctn table button svg {
  stroke: var(--accent);
  transition: all 0.3s ease;
}

.table-ctn table button:hover svg {
  stroke: var(--dark-text);
}

.pagination-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pagination-left Label {
  display: flex;
  width: 130px;
}
.pagination-left .select-selected {
  display: flex;
  width: 80px;
}

/* Stile für CRM-Kontakt Profilbild*/
.avatar-wrapper {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}

.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay button {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  margin: 0 10px;
  cursor: pointer;
}

.status-select-row {
  display: flex;
  align-items: center;
}

.status-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  color: var(--accent);
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

.status-select:hover {
  color: var(--accent-2);
}

.kontakt-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.quick-action-btn-ctn {
  display: flex;
  gap: 0.75rem;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quick-action-btn h6 {
  font-size: 1rem;
  font-weight: 400;
}

.quick-action-btn-ctn a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark-bg);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
  transition: all 0.3s ease;
}

.quick-action-btn-ctn a svg {
  stroke: var(--light-bg);
  transition: all 0.3s ease;
}

.quick-action-btn-ctn a:hover {
  background-color: var(--accent);
  transform: translateY(-2px);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--light-bg);
  padding: 1rem;
  width: 100%;
  border-radius: var(--light-radius);
}

.contact-name {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#chronik-beschreibung {
  width: 100%;
}

.kontakt-notiz {
  position: relative;
  display: flex;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 1rem;
  width: 100%;
  max-height: 600px;
}

#edit-kontakt-note-btn {
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: 99999;
}

.edit-kontakt-notiz textarea {
  width: 100%;
  resize: both;
}

/* Stile Chronik Timeline*/

#activities {
  max-height: min(625px, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#chronik-eintraege {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.chronik-eintrag {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--highlighted-bg);
  padding-bottom: 0.5rem;
}

.chronik-date-ctn {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 90%;
}

.chronik-date-ctn p {
  font-weight: 500;
}

.chronik-date-ctn button svg {
  cursor: pointer;
  fill: var(--accent);
  width: 25px;
  height: 25px;
  padding-top: 2px;
  transition: all 0.3s ease;
}

.chronik-date-ctn button:hover svg {
  fill: var(--accent-2);
}

/* Stile Dropdown Selct Chronik-Liste Aktivitäten */
.aktion-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  color: var(--accent);
  font-weight: 500;
  font: inherit;
  cursor: pointer;
  outline: none;
  font-size: 1.1rem;
  font-weight: 500;
}

.aktion-select-wrapper select::-ms-expand {
  display: none;
}

.aktion-select-wrapper {
  position: relative;
  display: inline-block;
}

.chronik-beschreibung-anzeige {
  outline: none;
  border: none;
  padding: 4px 0;
  min-height: 20px;
  cursor: text;
}

.chronik-aktion-select {
  font-size: 1.3rem;
}

/* -----------------------------

            Stile Zeiterfassung
            
---------------------------------*/

/* -----------------------------

            Tabellen
            
---------------------------------*/

.table-ctn {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--light-radius);
}

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  border-spacing: 0;
}

thead {
  width: 100%;
  background-color: var(--dark-bg);
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0px 3px 0px 0px var(--dark-bg);
}

thead tr th {
  color: var(--light-text);
  font-weight: 400;
  vertical-align: middle;
}

thead tr td button svg {
  fill: var(--accent);
}

table td,
table th {
  border-bottom: 1px solid var(--border-subtle);
  height: 56px;
  padding-left: var(--space-4);
  text-align: left;
  vertical-align: bottom;
  padding-right: 10px;
}

table td {
  vertical-align: middle;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Individuelle Stile für Klickbare Zeilen */

.clickable-row {
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
}

.clickable-row:hover {
  color: var(--nm-brand, var(--accent));
  background-color: var(--nm-surface-sunken, var(--highlighted-bg));
}

@media (max-width: 768px) {
  .table-ctn {
    overflow-x: auto;
    max-width: 100%;
  }

  .tab {
    max-width: 100%;
  }

  .tab .tablinks {
    flex: 0 0 auto;
  }

  section {
    padding: var(--space-4) 0.75rem;
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .box {
    padding: var(--space-4) 0.75rem;
    max-width: 100%;
    width: 100%;
  }
}

/* pagination */
.pagination {
  display: flex;
  gap: 1rem;
}

.pagination button {
  background-color: var(--accent);
  width: 30px;
  height: 30px;
  color: var(--light-text);
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination button:hover {
  background-color: var(--accent-2);
  width: 30px;
  height: 30px;
  color: var(--dark-text);
  border-radius: 100%;
}

.pagination .active {
  background-color: var(--dark-bg);
}

/* ------------------------------------------------------------
   Stile Webseiten - Übersichtsseite (Legacy-Spaltenregeln entfernt;
   aktiv: nm-websites-page / .nm-websites-table weiter unten)
----------------------------------------------------------------*/

.site-sync-meta {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-left: 0.5rem;
}

.site-sync-meta[data-stale="1"] {
  opacity: 1;
}

#site-sync-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ------------------------------------------------------------

    Stile Webseiten/WP Management - Detailseite
            
----------------------------------------------------------------*/

.plugin-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  font-weight: 500;
}

/* Aktiver Status */
.toggle-plugin-btn[data-plugin-status="active"] {
  color: var(--accent-2);
}

.toggle-plugin-btn[data-plugin-status="active"]:hover {
  color: grey;
}

/* Inaktiver Status */
.toggle-plugin-btn[data-plugin-status="inactive"] {
  color: grey;
}

.toggle-plugin-btn[data-plugin-status="inactive"]:hover {
  color: var(--accent);
}

.page-header {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  align-items: center;
}

.page-header button {
  margin-left: auto;
}

.page-header p {
  display: flex;
  gap: 0.5rem;
}

.page-header p span {
  display: flex;
  gap: 0.5rem;
}

.page-header p span button {
  color: var(--accent);
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.page-header p span button svg {
  fill: var(--accent);
  width: 1.25rem;
  height: 1.25rem;
  transition: all 0.3s ease;
}

.page-header p span button:hover {
  text-decoration: underline;
}

.page-header p span button:hover svg {
  transform: rotate(180deg);
}

.inactive-website {
  color: #888;
  background-color: #f9f9f9;
  cursor: not-allowed;
  opacity: 0.6;
}

.inactive-website a,
.inactive-website .disabled-link {
  pointer-events: none;
  color: #aaa;
  text-decoration: none;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}

.modal-body form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--light-bg);
}

.modal-body form label span {
  flex: 1;
}

.modal-body form input[type="checkbox"] {
  transform: scale(1.2);
}

.plugin-logo {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  display: inline-block;
}

.website-status-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.website-status-box span .preloader {
  width: 14px;
  height: 14px;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  justify-self: center;
}

.status-online {
  background-color: #28a745;
}

.status-offline {
  background-color: #dc3545;
}

#api-key-modal .modal-content,
#website-connection-modal .modal-content {
  min-width: none;
}

.website-connection-modal-content {
  border-top: 4px solid transparent;
}

#website-connection-modal.is-setup .website-connection-modal-content,
#api-key-modal.is-setup .website-connection-modal-content {
  border-top-color: #3b82f6;
}

#website-connection-modal.is-setup .connection-modal-title,
#api-key-modal.is-setup .connection-modal-title {
  color: #1d4ed8;
}

#website-connection-modal.is-error .website-connection-modal-content,
#api-key-modal.is-error .website-connection-modal-content,
#api-key-modal[data-mode="error"] .website-connection-modal-content {
  border-top-color: #dc3545;
}

#website-connection-modal.is-error .connection-modal-title,
#api-key-modal.is-error .connection-modal-title,
#api-key-modal[data-mode="error"] .connection-modal-title {
  color: #dc3545;
}

.connection-modal-refresh-btn[hidden] {
  display: none;
}

.api-token-wrapper {
  display: flex;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
}

.api-token {
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (max-width: 576px) {
  .api-token {
    max-width: 230px;
  }
}

/* --------- Stile Website Infos Tab ----------------*/

.website-infos-wrapper {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.website-info-box {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 1rem 2rem;
  width: 100%;
  flex: 1;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--dark-text);
  text-decoration: underline;
}

.quick-link svg {
  fill: inherit;
  width: 1rem;
}

.quick-link:hover {
  color: var(--accent);
}

.quick-link:hover svg {
  fill: var(--accent);
}

@media (max-width: 576px) {
  .website-infos-wrapper {
    flex-direction: column;
  }
}

/* --------- Stile BackUps ----------------*/

#backupProgressBar {
  height: 100%;
  width: 0%;
  background-color: var(--accent);
  transition: width 0.4s ease;
}

#backupProgressStatus {
  font-size: 1.5rem;
  font-weight: 500;
}

.progress-ctn {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

@media (max-width: 1345px) {
  .page-header {
    justify-content: space-between;
  }

  .page-header button {
    margin-left: 0;
  }

  .page-header p {
    flex-direction: column;
  }
}

@media (max-width: 1210px) {
  .page-header {
    justify-content: space-between;
  }
}

@media (max-width: 991px) {
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
  }

  .page-header > * {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

@media (max-width: 768px) {
  .page-header > * {
    flex: 1 1 100%;
  }
}

/* ----------------------------------

    Stile Logs
            
--------------------------------------*/

#logReportFormArea {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

/* ==========================================================================
   Avatars (nm-avatar) + Tasks SaaS (nm-tasks-page)
   ========================================================================== */

.nm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--nm-radius-pill, 999px);
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

.nm-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 0.7rem;
}
.nm-avatar--md {
  width: 38px;
  height: 38px;
  font-size: 0.82rem;
}
.nm-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 0.95rem;
}

.nm-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nm-avatar__initials {
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nm-avatar--palette-0 {
  background: var(--avatar-blue-bg);
  color: var(--avatar-blue-text);
}
.nm-avatar--palette-1 {
  background: var(--avatar-purple-bg);
  color: var(--avatar-purple-text);
}
.nm-avatar--palette-2 {
  background: var(--avatar-green-bg);
  color: var(--avatar-green-text);
}
.nm-avatar--palette-3 {
  background: var(--avatar-pink-bg);
  color: var(--avatar-pink-text);
}
.nm-avatar--palette-4 {
  background: var(--avatar-orange-bg);
  color: var(--avatar-orange-text);
}
.nm-avatar--palette-5 {
  background: var(--avatar-cyan-bg);
  color: var(--avatar-cyan-text);
}

section.nm-tasks-page,
.nm-tasks-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
  color: var(--tasks-text);
}

.nm-tasks-page [hidden] {
  display: none !important;
}
.nm-tasks-page .nm-page-header {
  margin-bottom: 0;
  width: 100%;
}

.tasks-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.nm-tasks-stat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-card-bg);
  box-shadow: var(--tasks-shadow);
}

.nm-tasks-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--nm-radius-md, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nm-tasks-stat__icon .nm-icon,
.nm-tasks-stat__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor !important;
  fill: none !important;
}

.nm-tasks-stat__label {
  display: block;
  color: var(--tasks-muted);
  font-size: 0.82rem;
}
.nm-tasks-stat__value {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 2px 0;
}
.nm-tasks-stat__hint {
  display: block;
  color: var(--tasks-muted);
  font-size: 0.78rem;
}

.nm-tasks-stat--total .nm-tasks-stat__icon {
  background: rgba(252, 79, 79, 0.12);
  color: var(--tasks-stat-total);
}
.nm-tasks-stat--open .nm-tasks-stat__icon {
  background: rgba(245, 159, 0, 0.14);
  color: var(--tasks-stat-open);
}
.nm-tasks-stat--progress .nm-tasks-stat__icon {
  background: rgba(59, 130, 246, 0.14);
  color: var(--tasks-stat-progress);
}
.nm-tasks-stat--done .nm-tasks-stat__icon {
  background: rgba(18, 183, 106, 0.14);
  color: var(--tasks-stat-done);
}
.nm-tasks-stat--overdue .nm-tasks-stat__icon {
  background: rgba(122, 90, 248, 0.14);
  color: var(--tasks-stat-overdue);
}

.tasks-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.tasks-workspace__main,
.tasks-workspace__side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nm-tasks-card {
  background: var(--tasks-card-bg);
  border: 1px solid var(--tasks-card-border);
  border-radius: var(--nm-radius-xl, 14px);
  box-shadow: var(--tasks-shadow);
  padding: 16px;
}

.nm-tasks-card h3 {
  margin: 0 0 12px;
  font-size: 0.98rem;
  color: var(--tasks-text);
}

.nm-tasks-toolbar-card {
  padding: 14px 16px 0;
}

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

.nm-tasks-search {
  position: relative;
  display: block;
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  min-width: 200px;
  height: 42px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-card-bg);
  box-sizing: border-box;
}

.nm-tasks-search__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tasks-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  z-index: 1;
}

.nm-tasks-search__icon .nm-icon,
.nm-tasks-search__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}

.nm-tasks-page .nm-tasks-search input,
.nm-tasks-page .nm-tasks-search input.nm-tasks-search__input,
.nm-tasks-page .nm-tasks-search input.nm-tasks-search__input:focus {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 40px 0 12px !important;
  border: 0 !important;
  border-radius: var(--nm-radius-md, 8px);
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tasks-text);
  box-sizing: border-box;
  font: inherit;
  line-height: 42px;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.nm-tasks-page .nm-tasks-search input::-webkit-search-decoration,
.nm-tasks-page .nm-tasks-search input::-webkit-search-cancel-button,
.nm-tasks-page .nm-tasks-search input::-webkit-search-results-button,
.nm-tasks-page .nm-tasks-search input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}

.nm-tasks-page .nm-tasks-search input::placeholder {
  color: var(--tasks-muted);
  opacity: 0.85;
  text-align: left;
}

.nm-tasks-page .nm-tasks-search:focus-within {
  border-color: rgba(252, 79, 79, 0.55);
  box-shadow: 0 0 0 3px var(--nm-danger-soft);
}

.nm-tasks-filter-control {
  position: relative;
  flex: 0 1 160px;
  min-width: 148px;
}

.nm-tasks-page .nm-tasks-filter-select,
.nm-tasks-page .nm-tasks-page-size,
.nm-tasks-page .nm-tasks-bulk select {
  width: 100%;
  height: 42px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-card-bg);
  color: var(--tasks-text);
  padding: 0 32px 0 12px;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}

html[data-theme="dark"] .nm-tasks-page .nm-tasks-filter-select,
html[data-theme="dark"] .nm-tasks-page .nm-tasks-page-size,
html[data-theme="dark"] .nm-tasks-page .nm-tasks-bulk select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa7b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.nm-tasks-page .nm-tasks-filter-select:hover,
.nm-tasks-page .nm-tasks-page-size:hover {
  border-color: #cfd8e3;
}

.nm-tasks-page .nm-tasks-filter-select:focus,
.nm-tasks-page .nm-tasks-page-size:focus {
  outline: none;
  border-color: rgba(252, 79, 79, 0.55);
  box-shadow: 0 0 0 3px var(--nm-danger-soft);
}

.nm-tasks-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--task-reset-border);
  background: var(--task-reset-bg);
  color: var(--task-reset-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.nm-tasks-reset .nm-icon,
.nm-tasks-reset svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}

.nm-tasks-reset:hover:not(:disabled) {
  color: var(--task-status-overdue-text);
  border-color: rgba(217, 45, 32, 0.28);
}

.nm-tasks-reset:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nm-tasks-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.nm-tasks-chip {
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-header-bg);
  color: var(--tasks-text);
  border-radius: var(--nm-radius-pill, 999px);
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.nm-tasks-tabs {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  border-bottom: 1px solid var(--tasks-card-border);
  overflow: visible;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.nm-tasks-tab {
  border: 0;
  background: transparent;
  color: var(--task-tab-text);
  padding: 10px 0 12px;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
}

.nm-tasks-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.nm-tasks-tab__icon .nm-icon,
.nm-tasks-tab__icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor !important;
  fill: none !important;
}

.nm-tasks-tab.is-active,
.nm-tasks-tab[aria-selected="true"] {
  color: var(--task-tab-active);
  border-bottom-color: var(--task-tab-line);
}

.nm-tasks-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-header-bg);
}

.nm-tasks-bulk .nm-tasks-reset {
  border: 0;
  background: transparent;
  height: auto;
  padding: 0 4px;
}

.nm-tasks-btn-danger {
  color: var(--nm-danger, #d92d20) !important;
}

.nm-tasks-table-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.nm-tasks-table-wrap {
  overflow-x: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.nm-tasks-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.nm-tasks-table th {
  text-align: left;
  padding: 12px 14px;
  background: #f8fafc;
  color: var(--tasks-muted);
  font-size: 0.76rem;
  font-weight: 600;
  border-bottom: 1px solid var(--app-border);
  letter-spacing: 0.01em;
}

html[data-theme="dark"] .nm-tasks-table th {
  background: #111c2b;
  border-bottom-color: #243349;
}

.nm-tasks-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tasks-card-border);
  vertical-align: middle;
  font-size: 0.9rem;
  min-height: 58px;
}

.nm-tasks-table tbody tr {
  min-height: 58px;
}

.nm-tasks-table tbody tr:hover td {
  background: var(--tasks-hover);
}
.nm-tasks-col-check {
  width: 42px;
}

.nm-tasks-title-cell {
  min-width: 0;
}

.nm-tasks-title-btn {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.nm-tasks-title-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nm-tasks-title-btn__text strong {
  font-weight: 600;
  color: var(--tasks-text);
}

.task-priority-rail {
  width: 3px;
  min-height: 34px;
  border-radius: var(--nm-radius-pill, 999px);
  flex-shrink: 0;
  margin-top: 2px;
  background: #98a2b3;
}

.task-priority-rail--hoch {
  background: var(--nm-brand);
}
.task-priority-rail--mittel {
  background: #f5a623;
}
.task-priority-rail--niedrig {
  background: #12b76a;
}
.task-priority-rail--none {
  background: #98a2b3;
}

.nm-tasks-context {
  color: var(--tasks-muted);
  font-size: 0.8rem;
}
.nm-tasks-assignee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nm-tasks-unassigned {
  color: var(--tasks-muted);
}

.nm-tasks-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 25px;
  padding: 0 10px;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.nm-tasks-prio--high {
  background: var(--task-prio-high-bg);
  color: var(--task-prio-high-text);
}
.nm-tasks-prio--mid {
  background: var(--task-prio-mid-bg);
  color: var(--task-prio-mid-text);
}
.nm-tasks-prio--low {
  background: var(--task-prio-low-bg);
  color: var(--task-prio-low-text);
}

.nm-tasks-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.nm-tasks-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.nm-tasks-status--open {
  background: var(--task-status-open-bg);
  color: var(--task-status-open-text);
}
.nm-tasks-status--progress {
  background: var(--task-status-progress-bg);
  color: var(--task-status-progress-text);
}
.nm-tasks-status--done {
  background: var(--task-status-completed-bg);
  color: var(--task-status-completed-text);
}
.nm-tasks-status--overdue {
  background: var(--task-status-overdue-bg);
  color: var(--task-status-overdue-text);
}

.nm-tasks-due.is-overdue,
.nm-tasks-due.is-today {
  color: var(--task-status-overdue-text);
  font-weight: 600;
}

.nm-tasks-due.is-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tasks-muted);
}

.nm-tasks-more {
  position: relative;
}
.nm-tasks-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--tasks-card-bg);
  border: 1px solid var(--tasks-card-border);
  border-radius: var(--nm-radius-md, 10px);
  box-shadow: var(--tasks-shadow);
  z-index: 20;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.nm-tasks-more-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--nm-radius-md, 8px);
  cursor: pointer;
  color: var(--tasks-text);
  font: inherit;
}
.nm-tasks-more-menu button:hover {
  background: var(--tasks-hover);
}
.nm-tasks-more-menu .is-danger {
  color: #d92d20;
}

.nm-tasks-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--tasks-card-border);
  color: var(--tasks-muted);
  font-size: 0.86rem;
  background: var(--tasks-card-bg);
}

.nm-tasks-pagination__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nm-tasks-page-size {
  width: auto !important;
  min-width: 64px;
  height: 34px !important;
  padding: 0 28px 0 10px !important;
}

.nm-tasks-pagination__controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nm-tasks-page-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nm-tasks-page-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--tasks-card-border);
  background: var(--tasks-card-bg);
  color: var(--tasks-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 560;
}

.nm-tasks-page-btn .nm-icon,
.nm-tasks-page-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}

.nm-tasks-page-btn:hover:not(:disabled) {
  background: var(--tasks-hover);
}

.nm-tasks-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nm-tasks-page-btn.is-active {
  border-color: var(--nm-brand);
  color: var(--nm-brand);
  background: rgba(252, 79, 79, 0.08);
}

.nm-tasks-empty {
  text-align: center;
  padding: 48px 16px;
  flex: 1 1 auto;
}
.nm-tasks-empty h3 {
  margin: 0 0 8px;
}
.nm-tasks-empty p {
  color: var(--tasks-muted);
  margin: 0 0 14px;
}

.nm-tasks-chart-layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.nm-tasks-chart-wrap {
  height: 112px;
  width: 112px;
  position: relative;
}
.nm-tasks-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.nm-tasks-chart-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--tasks-text);
}
.nm-tasks-chart-legend .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.nm-tasks-upcoming {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.nm-tasks-upcoming button {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--nm-radius-md, 10px);
  color: inherit;
  font: inherit;
}
.nm-tasks-upcoming button:hover {
  background: var(--tasks-hover);
}
.nm-tasks-upcoming small {
  display: block;
  color: var(--tasks-muted);
  font-size: 0.78rem;
  margin-bottom: 2px;
}
.nm-tasks-upcoming strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}
.nm-tasks-muted {
  color: var(--tasks-muted);
  font-size: 0.88rem;
}

.nm-tasks-calendar {
  max-width: 100%;
  overflow: hidden;
}

.nm-mini-cal {
  width: 100%;
  color: var(--tasks-text);
}

.nm-mini-cal__nav {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.nm-mini-cal__title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tasks-text);
}

.nm-mini-cal__nav-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--tasks-muted);
  border-radius: var(--nm-radius-md, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.nm-mini-cal__nav-btn:hover {
  background: var(--tasks-hover);
  color: var(--tasks-text);
}

.nm-mini-cal__weekdays,
.nm-mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
}

.nm-mini-cal__weekdays {
  margin-bottom: 4px;
}

.nm-mini-cal__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tasks-text);
  padding: 4px 0;
}

.nm-mini-cal__day {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 34px;
  padding: 2px 0 4px;
  cursor: pointer;
  color: var(--tasks-text);
  border-radius: var(--nm-radius-md, 8px);
}

.nm-mini-cal__day:hover {
  background: var(--tasks-hover);
}

.nm-mini-cal__num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1;
  border-radius: 7px;
}

.nm-mini-cal__day.is-other .nm-mini-cal__num {
  color: #c3ccd8;
  font-weight: 500;
}

html[data-theme="dark"] .nm-mini-cal__day.is-other .nm-mini-cal__num {
  color: #607084;
}

.nm-mini-cal__day.is-today .nm-mini-cal__num,
.nm-mini-cal__day.is-selected .nm-mini-cal__num {
  background: var(--nm-brand);
  color: #fff;
  font-weight: 700;
}

.nm-mini-cal__dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 4px;
}

.nm-fc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.nm-fc-dot--hoch {
  background: var(--nm-brand);
}
.nm-fc-dot--mittel {
  background: #f59f00;
}
.nm-fc-dot--niedrig {
  background: #12b76a;
}
.nm-tasks-calendar-fallback {
  display: none;
}

/* Tasks-specific drawer remnants (shell unified under CRM block below) */
.nm-drawer__meta {
  color: var(--task-drawer-muted);
  font-size: 0.82rem;
}

.nm-tasks-detail-dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.nm-tasks-detail-dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--task-drawer-border);
}
.nm-tasks-detail-dl dt {
  color: var(--task-drawer-muted);
  margin: 0;
}
.nm-tasks-detail-dl dd {
  margin: 0;
}
.nm-tasks-detail-desc {
  white-space: pre-wrap;
  margin: 0 0 8px;
  color: var(--task-drawer-text);
}

@media (max-width: 1280px) {
  .tasks-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .tasks-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .nm-tasks-chart-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.nm-tasks-cards {
  display: none;
  gap: 10px;
  padding: 12px;
}
.nm-tasks-mobile-card__top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.nm-tasks-mobile-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

@media (max-width: 768px) {
  .nm-tasks-page {
    padding: 20px 16px 28px;
  }
  .tasks-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nm-tasks-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .nm-tasks-filter-control {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
  .nm-tasks-reset {
    width: 100%;
    justify-content: center;
  }
  .nm-tasks-tabs {
    gap: 14px;
  }
  .nm-tasks-tab {
    font-size: 0.75rem;
  }
  .nm-form-grid {
    grid-template-columns: 1fr;
  }
  .nm-drawer__panel {
    width: 100%;
  }
  .nm-tasks-table-wrap {
    display: none !important;
  }
  .nm-tasks-cards {
    display: grid !important;
    flex: 1 1 auto;
  }
  .nm-tasks-table-card {
    min-height: 420px;
  }
}

/* ==========================================================================
   CRM Overview (nm-crm-page)
   ========================================================================== */

section.nm-crm-page,
.nm-crm-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
  color: var(--crm-table-text);
}

.nm-crm-page [hidden] {
  display: none !important;
}
.nm-crm-page .nm-page-header {
  margin-bottom: 0;
  width: 100%;
}

.nm-crm-page > .nm-page-header,
.nm-crm-page > .crm-stats-grid,
.nm-crm-page > .nm-crm-toolbar-card,
.nm-crm-page > .nm-crm-bulk,
.nm-crm-page > .nm-crm-table-card {
  flex: 0 0 auto;
}

.nm-crm-page > .crm-stats-grid,
.nm-crm-page .crm-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: none;
  margin-top: 0;
  align-self: stretch;
  box-sizing: border-box;
}

.nm-crm-page .crm-stats-grid > .nm-crm-stat {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.nm-crm-stat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--crm-card-border);
  background: var(--crm-card-bg);
  box-shadow: var(--crm-shadow);
}

.nm-crm-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--nm-radius-md, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nm-crm-stat__icon .nm-icon,
.nm-crm-stat__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor !important;
  fill: none !important;
}
.nm-crm-stat__label {
  display: block;
  color: var(--crm-table-muted);
  font-size: 0.82rem;
}
.nm-crm-stat__value {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 2px 0;
}
.nm-crm-stat__hint {
  display: block;
  color: var(--crm-table-muted);
  font-size: 0.78rem;
}

.nm-crm-stat--total .nm-crm-stat__icon {
  background: rgba(252, 79, 79, 0.12);
  color: var(--crm-stat-total);
}
.nm-crm-stat--company .nm-crm-stat__icon {
  background: rgba(59, 130, 246, 0.14);
  color: var(--crm-stat-company);
}
.nm-crm-stat--person .nm-crm-stat__icon {
  background: rgba(18, 183, 106, 0.14);
  color: var(--crm-stat-person);
}
.nm-crm-stat--active .nm-crm-stat__icon {
  background: rgba(245, 159, 0, 0.14);
  color: var(--crm-stat-active);
}
.nm-crm-stat--fav .nm-crm-stat__icon {
  background: rgba(122, 90, 248, 0.14);
  color: var(--crm-stat-fav);
}

.nm-crm-card {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-card-border);
  border-radius: var(--nm-radius-xl, 14px);
  box-shadow: var(--crm-shadow);
  padding: 16px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-self: stretch;
}

.nm-crm-toolbar-card {
  padding: 14px 16px;
  width: 100%;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
}

.nm-crm-filters {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) repeat(5, minmax(0, 1fr)) minmax(
      max-content,
      auto
    );
  gap: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.nm-crm-search {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 42px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-card-border);
  background: var(--crm-card-bg);
  box-sizing: border-box;
}

.nm-crm-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--crm-table-muted);
  pointer-events: none;
  display: inline-flex;
  z-index: 1;
}

.nm-crm-search__icon .nm-icon,
.nm-crm-search__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}

.nm-crm-page .nm-crm-search input,
.nm-crm-page .nm-crm-search input.nm-crm-search__input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 12px 0 40px !important;
  border: 0 !important;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent !important;
  box-shadow: none !important;
  color: var(--crm-table-text);
  font: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.nm-crm-page .nm-crm-search input::-webkit-search-decoration,
.nm-crm-page .nm-crm-search input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.nm-crm-page .nm-crm-search:focus-within {
  border-color: rgba(252, 79, 79, 0.55);
  box-shadow: 0 0 0 3px var(--nm-danger-soft);
}

.nm-crm-filter-control {
  width: 100%;
  min-width: 0;
}

.nm-crm-filters > .nm-crm-reset {
  justify-self: stretch;
  width: 100%;
  justify-content: center;
}

.nm-crm-page .nm-crm-filter-select,
.nm-crm-page .nm-crm-page-size,
.nm-crm-page .nm-crm-bulk select {
  width: 100%;
  height: 42px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-card-border);
  background: var(--crm-card-bg);
  color: var(--crm-table-text);
  padding: 0 32px 0 12px;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.nm-crm-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-reset-border);
  background: var(--crm-reset-bg);
  color: var(--crm-reset-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.nm-crm-reset .nm-icon,
.nm-crm-reset svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}
.nm-crm-reset:hover:not(:disabled) {
  color: var(--crm-status-danger-text);
}
.nm-crm-reset:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nm-crm-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--crm-card-border);
  background: var(--crm-table-header-bg);
}

.nm-crm-btn-danger {
  color: var(--crm-status-danger-text) !important;
}

.nm-crm-table-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  max-height: none;
  min-width: 0;
  width: 100%;
}

.nm-crm-table-wrap {
  width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  flex: 0 0 auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.15s ease;
}

.nm-crm-table-wrap.is-soft-loading,
.nm-crm-cards.is-soft-loading {
  opacity: 0.55;
  pointer-events: none;
}

.nm-crm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--crm-table-bg);
}

.nm-crm-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--crm-table-header-bg);
  color: var(--crm-table-muted);
  font-size: 0.76rem;
  font-weight: 600;
  border-bottom: 1px solid var(--crm-table-border);
}

.nm-crm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--crm-table-border);
  vertical-align: middle;
  font-size: 0.9rem;
  min-height: 58px;
  color: var(--crm-table-text);
}

.nm-crm-table tbody tr:hover td {
  background: var(--crm-table-hover);
}

.nm-crm-table tbody tr.is-clickable {
  cursor: pointer;
}

.nm-crm-table tbody tr.is-clickable:hover td {
  background: var(--crm-table-hover);
}

.nm-crm-table tbody tr.is-clickable:focus-visible {
  outline: 2px solid var(--color-focus, #7c5cfc);
  outline-offset: -2px;
}

.nm-crm-col-check {
  width: 42px;
}
.nm-crm-col-ma {
  width: 56px;
  text-align: center;
}
.nm-crm-table th.nm-crm-col-ma,
.nm-crm-table td.nm-crm-col-ma {
  padding-left: 8px;
  padding-right: 8px;
}
.nm-crm-ma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nm-crm-ma .nm-avatar {
  margin: 0 auto;
}

.nm-crm-sort {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}

.nm-crm-sort-icon .nm-icon,
.nm-crm-sort-icon svg {
  width: 12px;
  height: 12px;
  opacity: 0.55;
}
.nm-crm-sort.is-active {
  color: var(--crm-name);
}
.nm-crm-sort.is-active .nm-crm-sort-icon .nm-icon,
.nm-crm-sort.is-active .nm-crm-sort-icon svg {
  opacity: 1;
  stroke: currentColor !important;
}

.nm-crm-contact {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.nm-crm-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nm-crm-contact__name {
  font-weight: 600;
  color: var(--crm-name);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-crm-contact__name:hover {
  text-decoration: underline;
}
.nm-crm-contact__sub {
  color: var(--crm-table-muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-crm-type-pill,
.nm-crm-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--nm-radius-pill, 999px);
  font-weight: 600;
  white-space: nowrap;
}

.nm-crm-type-pill {
  height: 25px;
  font-size: 0.76rem;
  background: var(--crm-type-bg);
  color: var(--crm-type-text);
}

/* Effective cascade (Detail-Override war global) — eine Definition */
.nm-crm-status-pill {
  height: 26px;
  font-size: 0.75rem;
  line-height: 1;
  background: var(--crm-status-neutral-bg);
  color: var(--crm-status-neutral-text);
}
.nm-crm-status-pill--neutral {
  background: var(--crm-status-neutral-bg);
  color: var(--crm-status-neutral-text);
}
.nm-crm-status-pill--info {
  background: var(--crm-status-info-bg);
  color: var(--crm-status-info-text);
}
.nm-crm-status-pill--warning {
  background: var(--crm-status-warning-bg);
  color: var(--crm-status-warning-text);
}
.nm-crm-status-pill--success {
  background: var(--crm-status-success-bg);
  color: var(--crm-status-success-text);
}
.nm-crm-status-pill--danger {
  background: var(--crm-status-danger-bg);
  color: var(--crm-status-danger-text);
}
.nm-crm-status-pill--muted {
  background: var(--crm-status-muted-bg);
  color: var(--crm-status-muted-text);
}

.nm-crm-followup {
  font-size: 0.84rem;
}
.nm-crm-followup.is-overdue,
.nm-crm-followup.is-today {
  color: var(--crm-status-danger-text);
  font-weight: 600;
}
.nm-crm-followup.is-planned {
  color: var(--crm-status-info-text, var(--color-info-600, #0284c7));
}
.nm-crm-followup.is-completed {
  color: var(--crm-table-muted);
}
.nm-crm-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nm-crm-muted {
  color: var(--crm-table-muted);
  font-size: 0.86rem;
}

.nm-crm-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Icon-Action-Buttons (Favorit / Bearbeiten / Löschen): Basis wie Favorit */
.nm-crm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--crm-card-border, var(--crm-detail-border));
  border-radius: var(--nm-radius-md, 10px);
  background: var(--crm-card-bg, var(--crm-detail-surface));
  color: var(--crm-table-muted, var(--crm-detail-muted));
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.nm-crm-icon-btn:hover {
  color: var(--crm-table-text, var(--crm-detail-text));
  background: var(
    --crm-table-hover,
    color-mix(in srgb, var(--crm-detail-text) 6%, var(--crm-detail-surface))
  );
  border-color: color-mix(
    in srgb,
    var(--crm-table-text, var(--crm-detail-text)) 18%,
    var(--crm-card-border, var(--crm-detail-border))
  );
}
.nm-crm-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}
.nm-crm-icon-btn--danger:hover {
  color: var(--crm-status-danger-text);
  border-color: color-mix(
    in srgb,
    var(--crm-status-danger-text) 35%,
    var(--crm-card-border, var(--crm-detail-border))
  );
  background: color-mix(
    in srgb,
    var(--crm-status-danger-text) 10%,
    var(--crm-card-bg, var(--crm-detail-surface))
  );
}
/* Fav-Btn: globale Definition weiter unten (ehem. Detail-Override, Cascade-Effektivwert) */
.nm-crm-more-toggle {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--crm-table-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nm-crm-more-toggle:hover {
  background: var(--crm-table-hover);
  color: var(--crm-table-text);
}
.nm-crm-more-toggle .nm-icon,
.nm-crm-more-toggle svg {
  width: 16px;
  height: 16px;
}

.nm-crm-more {
  position: relative;
}
.nm-crm-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-card-border);
  border-radius: var(--nm-radius-md, 10px);
  box-shadow: var(--crm-shadow);
  z-index: 30;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.nm-crm-more-menu button,
.nm-crm-more-menu a {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--nm-radius-md, 8px);
  cursor: pointer;
  color: var(--crm-table-text);
  font: inherit;
  text-decoration: none;
}
.nm-crm-more-menu button:hover,
.nm-crm-more-menu a:hover {
  background: var(--crm-table-hover);
}
.nm-crm-more-menu .is-danger {
  color: var(--crm-status-danger-text);
}

.nm-crm-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--crm-table-border);
  color: var(--crm-table-muted);
  font-size: 0.86rem;
}

.nm-crm-pagination__controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nm-crm-page-numbers {
  display: flex;
  gap: 4px;
}
.nm-crm-page-size {
  width: auto !important;
  min-width: 120px;
  height: 34px !important;
}

.nm-crm-page-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-card-border);
  background: var(--crm-card-bg);
  color: var(--crm-table-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
}
.nm-crm-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nm-crm-page-btn.is-active {
  border-color: var(--crm-name);
  color: var(--crm-name);
  background: rgba(252, 79, 79, 0.08);
}
.nm-crm-page-btn .nm-icon,
.nm-crm-page-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor !important;
}

.nm-crm-empty {
  text-align: center;
  padding: 48px 16px;
  flex: 1 1 auto;
}
.nm-crm-empty h3 {
  margin: 0 0 8px;
}
.nm-crm-empty p {
  color: var(--crm-table-muted);
  margin: 0 0 14px;
}
.nm-crm-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.nm-crm-cards {
  display: none;
  gap: 10px;
  padding: 12px;
}
.nm-crm-mobile-card {
  border: 1px solid var(--crm-card-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--crm-card-bg);
}
.nm-crm-mobile-card.is-clickable {
  cursor: pointer;
}
.nm-crm-mobile-card.is-clickable:hover {
  border-color: color-mix(
    in srgb,
    var(--color-primary, #7c5cfc) 22%,
    var(--crm-card-border)
  );
  background: var(--crm-table-hover);
}
.nm-crm-mobile-card.is-clickable:focus-visible {
  outline: 2px solid var(--color-focus, #7c5cfc);
  outline-offset: 2px;
}
.nm-crm-mobile-card__top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.nm-crm-mobile-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ==========================================================================
   NM Drawer System (global side-drawer shell + form primitives)
   ========================================================================== */
.nm-drawer[hidden] {
  display: none !important;
}
.nm-drawer:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 1200);
  display: block;
}
.nm-drawer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}
.nm-drawer__panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(580px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--crm-detail-surface);
  border-left: 1px solid var(--crm-detail-border);
  box-shadow: var(--crm-detail-shadow);
  color: var(--crm-detail-text);
  overflow: hidden;
}

.nm-drawer__panel--md {
  width: min(560px, 100vw);
}
.nm-drawer__panel--lg {
  width: min(720px, 100vw);
}
.nm-drawer__panel--xl {
  width: clamp(640px, 48vw, 820px);
  max-width: 100vw;
}

.nm-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--crm-detail-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--crm-detail-surface);
}

.nm-drawer__header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.nm-drawer__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: color-mix(
    in srgb,
    var(--nm-brand, var(--accent)) 12%,
    var(--crm-detail-surface)
  );
  color: var(--nm-brand, var(--accent));
}

.nm-drawer__header-icon svg {
  width: 20px;
  height: 20px;
  color: inherit;
  stroke: currentColor;
}

.nm-drawer__header-copy {
  min-width: 0;
}

.nm-drawer__header h2 {
  margin: 0 0 2px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--crm-detail-text);
}
.nm-drawer__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--crm-detail-muted);
}
.nm-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.nm-drawer__close:hover {
  color: var(--crm-detail-text);
  background: color-mix(
    in srgb,
    var(--crm-detail-text) 4%,
    var(--crm-detail-surface)
  );
}
.nm-drawer__close .nm-icon,
.nm-drawer__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.nm-drawer__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.nm-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.nm-drawer__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--crm-detail-border);
  background: var(--crm-detail-surface);
  box-shadow: none;
  flex-shrink: 0;
}
.nm-drawer__footer--split {
  flex-wrap: wrap;
}
.nm-drawer__footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.nm-drawer__footer .nm-btn--ghost {
  color: var(--crm-muted, var(--text-muted, #64748b));
  background: transparent;
  border: 1px solid transparent;
}
.nm-drawer__footer .nm-btn--ghost:hover {
  color: var(--text, #0f172a);
  background: var(--crm-detail-hover, rgba(124, 92, 252, 0.06));
  border-color: var(--crm-detail-border, #e2e8f0);
}
.nm-drawer__footer .nm-btn--primary,
.nm-drawer__footer .nm-btn--primary span {
  color: #fff;
}
.nm-drawer__footer .nm-btn--primary svg,
.nm-drawer__footer .nm-btn--primary .nm-icon {
  color: #fff;
  stroke: #fff;
  fill: none;
}

.crm-form-website-controls.is-loading #crmLoadWebsiteDataBtn svg,
#crmLoadWebsiteDataBtn.is-loading svg {
  animation: spin 0.9s linear infinite;
}
.form-field.is-scrape-loading {
  position: relative;
}
.form-field.is-scrape-loading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5rem;
  border-radius: var(--nm-radius-md, 10px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--crm-detail-border, #e2e8f0) 55%, transparent),
    color-mix(in srgb, var(--crm-detail-surface, #fff) 70%, #e2e8f0),
    color-mix(in srgb, var(--crm-detail-border, #e2e8f0) 55%, transparent)
  );
  background-size: 200% 100%;
  animation: nm-skeleton-shimmer 1.2s ease-in-out infinite;
  opacity: 0.85;
}
.form-field.is-scrape-loading input,
.form-field.is-scrape-loading select {
  color: transparent;
  caret-color: transparent;
}
html[data-theme="dark"] .form-field.is-scrape-loading::after {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.18),
    rgba(148, 163, 184, 0.32),
    rgba(148, 163, 184, 0.18)
  );
  background-size: 200% 100%;
}

@media (max-width: 640px) {
  .nm-drawer__panel,
  .nm-drawer__panel--md,
  .nm-drawer__panel--lg {
    width: 100vw;
    max-width: 100vw;
  }
  .nm-form-grid,
  .nm-form-row,
  .nm-form-row--wide-left,
  .nm-form-row--wide-right {
    grid-template-columns: 1fr;
  }
}

/* Form primitives */
.nm-form-section {
  padding-bottom: 0;
  border-bottom: 0;
}
.nm-form-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crm-detail-muted);
}
.nm-form-section__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--crm-detail-border);
  opacity: 0.9;
}
.nm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.nm-form-grid--equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nm-form-grid--wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
.nm-form-grid--wide-right {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}
.nm-form-grid--address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-form-grid__full {
  grid-column: 1 / -1;
}
.nm-form-row {
  display: grid;
  gap: 10px 12px;
  min-width: 0;
}
.nm-form-row--wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
.nm-form-row--wide-right {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

/* Contact drawer: website scrape + compact field modifiers */
.nm-drawer__panel--lg .nm-form-section {
  padding-bottom: 0;
  border-bottom: 0;
}
.nm-drawer__panel--lg .nm-form-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crm-detail-muted);
}
.nm-drawer__panel--lg .nm-form-section__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--crm-detail-border);
  opacity: 0.9;
}
.nm-drawer__panel--lg .nm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.nm-drawer__panel--lg .nm-form-grid--address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-drawer__panel--lg .nm-form-row {
  display: grid;
  gap: 10px 12px;
  min-width: 0;
}
.nm-drawer__panel--lg .nm-form-row--wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
.nm-drawer__panel--lg .nm-form-row--wide-right {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

.nm-drawer__panel--lg .crm-form-website-block {
  padding: 12px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 8px);
  background: color-mix(
    in srgb,
    var(--crm-detail-text) 2.5%,
    var(--crm-detail-surface)
  );
}
.nm-drawer__panel--lg .crm-form-website-row {
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.nm-drawer__panel--lg .crm-form-website-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.nm-drawer__panel--lg .crm-form-website-controls .nm-input-with-icon {
  min-width: 0;
  width: 100%;
}
.nm-drawer__panel--lg .crm-form-website-controls input#crmFormWebsite,
.nm-drawer__panel--lg .crm-form-website-controls input {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
  min-height: 42px;
  height: 42px;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-inline: 0.95rem;
  background-color: var(--nm-brand, var(--accent));
  border-color: var(--nm-brand, var(--accent));
  color: #fff;
}
.nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn:hover {
  background-color: var(--nm-brand-hover, var(--dark-bg));
  border-color: var(--nm-brand-hover, var(--dark-bg));
  color: #fff;
}
.nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn span,
.nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn svg,
.nm-drawer__panel--lg
  .crm-form-website-controls
  #crmLoadWebsiteDataBtn
  .nm-icon {
  color: #fff;
  stroke: #fff;
  fill: none;
}
.nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.crm-form-website-controls.is-loading #crmLoadWebsiteDataBtn,
.crm-form-website-controls.is-loading .nm-btn {
  pointer-events: none;
  opacity: 0.72;
}
.crm-form-website-controls.is-success .nm-input-with-icon input,
.crm-form-website-controls.is-success input {
  border-color: var(--crm-status-success-text);
}
.crm-form-website-controls.is-error .nm-input-with-icon input,
.crm-form-website-controls.is-error input {
  border-color: var(--crm-status-danger-text);
}
@media (max-width: 640px) {
  .nm-drawer__panel--lg .crm-form-website-controls {
    grid-template-columns: 1fr;
  }
  .nm-drawer__panel--lg .crm-form-website-controls #crmLoadWebsiteDataBtn {
    width: 100%;
  }
  .nm-drawer__panel--lg .nm-form-row--wide-left,
  .nm-drawer__panel--lg .nm-form-row--wide-right {
    grid-template-columns: 1fr;
  }
  .nm-drawer__panel--lg .nm-form-field--status {
    max-width: none;
  }
}

.nm-drawer__panel--lg .nm-form-field--status {
  max-width: 280px;
}
.nm-drawer__panel--lg .nm-form-field--status select {
  font-weight: 560;
}
.nm-drawer__panel--lg .nm-form-field--notes textarea {
  min-height: 96px;
  line-height: 1.45;
}

/* Input-with-Icon: feste Icon-Zone links, Text beginnt rechts daneben */
.nm-input-with-icon {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.nm-input-with-icon__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(
    in srgb,
    var(--nm-brand, var(--accent)) 55%,
    var(--crm-detail-muted, #667085)
  );
  pointer-events: none;
  z-index: 2;
}
.nm-input-with-icon__icon svg,
.nm-input-with-icon__icon .nm-icon {
  width: 16px;
  height: 16px;
  display: block;
  color: inherit;
  stroke: currentColor;
}
.nm-input-with-icon--textarea .nm-input-with-icon__icon {
  align-items: flex-start;
  padding-top: 12px;
  bottom: auto;
  height: auto;
}
.nm-input-with-icon > input,
.nm-input-with-icon > select,
.nm-input-with-icon > textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 42px;
}
.nm-input-with-icon > select {
  padding-right: 2rem;
}
.nm-input-with-icon--textarea > textarea {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
}

.nm-drawer .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.nm-drawer .form-field > span:first-child,
.nm-drawer .form-field > #crmFormWebsiteLabel {
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--crm-detail-text);
}
.nm-drawer .form-field input:not([type="checkbox"]):not([type="radio"]),
.nm-drawer .form-field select,
.nm-drawer .form-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-text);
  padding: 0 12px;
  font: inherit;
  line-height: 1.35;
  box-sizing: border-box;
}
.nm-drawer .form-field textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}
/* Icon-Zone: Spezifität muss Drawer-Input inkl. :not()-Attribute schlagen */
.nm-drawer .form-field .nm-input-with-icon > input:not([type="checkbox"]):not([type="radio"]),
.nm-drawer .form-field .nm-input-with-icon > select {
  padding: 0 12px 0 42px;
}
.nm-drawer .form-field .nm-input-with-icon > select {
  padding-right: 2rem;
}
.nm-drawer .form-field .nm-input-with-icon--textarea > textarea,
.nm-drawer .form-field .nm-input-with-icon > textarea {
  padding: 10px 12px 10px 42px;
}
.nm-drawer
  .form-field
  input:not([type="checkbox"]):not([type="radio"])::placeholder,
.nm-drawer .form-field textarea::placeholder {
  color: color-mix(in srgb, var(--crm-detail-muted) 82%, transparent);
}
.nm-drawer .form-field input:not([type="checkbox"]):not([type="radio"]):hover,
.nm-drawer .form-field select:hover,
.nm-drawer .form-field textarea:hover {
  border-color: color-mix(
    in srgb,
    var(--crm-detail-text) 18%,
    var(--crm-detail-border)
  );
}
.nm-drawer .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.nm-drawer .form-field select:focus,
.nm-drawer .form-field textarea:focus {
  outline: none;
  border-color: var(--nm-brand, var(--color-primary, #7c5cfc));
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--nm-brand, var(--color-primary, #7c5cfc)) 16%,
      transparent
    );
}
.nm-drawer .nm-btn.is-saving {
  pointer-events: none;
  opacity: 0.82;
}
.nm-crm-form-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--nm-radius-md, 8px);
  background: var(--crm-status-danger-bg);
  color: var(--crm-status-danger-text);
  font-size: 0.8125rem;
}
.nm-crm-user-error {
  display: block;
}
.nm-crm-user-error__title {
  margin: 0 0 0.45rem;
  font-weight: 600;
  line-height: 1.4;
}
.nm-crm-user-error__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.nm-crm-user-error__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--nm-radius-sm, 6px);
  background: color-mix(
    in srgb,
    var(--crm-status-danger-text, #b42318) 8%,
    transparent
  );
}
.nm-crm-user-error__url {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.75rem;
  word-break: break-all;
  opacity: 0.92;
}
.nm-crm-user-error__msg {
  line-height: 1.35;
}
.nm-crm-user-error__more {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  opacity: 0.85;
}
.nm-crm-import-preview {
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 10px);
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  font-size: 0.84rem;
}

.nm-crm-bulk-create-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nm-crm-bulk-urls-field textarea {
  min-height: 220px;
  resize: vertical;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.45;
}

.nm-crm-bulk-create-hint {
  margin: 0;
}

.nm-crm-bulk-url-stats {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface-muted, rgba(15, 23, 42, 0.03));
  color: var(--nm-text-muted, #64748b);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.nm-crm-bulk-url-stats.is-limit-exceeded {
  border-color: color-mix(
    in srgb,
    var(--color-danger-500, #fc5757) 35%,
    transparent
  );
  background: var(--crm-status-danger-bg, rgba(252, 87, 87, 0.08));
  color: var(--crm-status-danger-text, #b42318);
}

.nm-crm-bulk-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* Drawer liegt außerhalb .nm-crm-page – display:flex überschreibt sonst [hidden] */
#crmBulkCreateDrawer [hidden],
#crmBulkCloseConfirmModal[hidden] {
  display: none !important;
}

.nm-crm-bulk-scrape-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface-muted, rgba(15, 23, 42, 0.03));
}

.nm-crm-bulk-scrape-progress__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.nm-crm-bulk-scrape-progress__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid
    color-mix(
      in srgb,
      var(--nm-primary, var(--color-primary, #7c5cfc)) 25%,
      transparent
    );
  border-top-color: var(--nm-primary, var(--color-primary, #7c5cfc));
  animation: nm-crm-analysis-progress-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.nm-crm-bulk-scrape-progress__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nm-text, var(--text-primary, #0f172a));
}

.nm-crm-bulk-scrape-progress__pct {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-scrape-progress__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding-left: calc(14px + 0.5rem);
}

.nm-crm-bulk-scrape-progress__current {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nm-text, #0f172a);
}

.nm-crm-bulk-scrape-progress__domain {
  font-size: 0.75rem;
  color: var(--nm-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-crm-bulk-scrape-progress__track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nm-border, #e2e8f0) 85%, transparent);
  overflow: hidden;
}

.nm-crm-bulk-scrape-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--nm-primary, var(--color-primary, #7c5cfc));
  transition: width 0.35s ease;
}

.nm-crm-bulk-scrape-progress__stats {
  margin: 0;
  padding-left: calc(14px + 0.5rem);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--nm-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .nm-crm-bulk-scrape-progress__spinner {
    animation: none;
    opacity: 0.65;
  }

  .nm-crm-bulk-scrape-progress__fill {
    transition: none;
  }
}

.nm-crm-bulk-progress-label {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface-muted, rgba(15, 23, 42, 0.03));
  font-size: 0.875rem;
  font-weight: 600;
}

.nm-crm-bulk-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nm-crm-bulk-progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface, #fff);
  font-size: 0.8125rem;
}

.nm-crm-bulk-progress-domain {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-crm-bulk-progress-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-progress-item[data-status="completed"]
  .nm-crm-bulk-progress-status {
  color: var(--crm-status-success-text, #15803d);
}

.nm-crm-bulk-progress-item[data-status="processing"]
  .nm-crm-bulk-progress-status {
  color: var(--color-primary-600, #6b46f2);
  font-weight: 600;
}

.nm-crm-bulk-progress-item[data-status="failed"] .nm-crm-bulk-progress-status {
  color: var(--crm-status-danger-text, #b42318);
}

.nm-crm-bulk-progress-item[data-status="skipped"] .nm-crm-bulk-progress-status {
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-progress-item[data-status="pending"] .nm-crm-bulk-progress-status {
  color: var(--nm-text-muted, #94a3b8);
}

.nm-crm-bulk-progress-item-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid
    color-mix(
      in srgb,
      var(--nm-primary, var(--color-primary, #7c5cfc)) 25%,
      transparent
    );
  border-top-color: var(--nm-primary, var(--color-primary, #7c5cfc));
  animation: nm-crm-analysis-progress-spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* CRM Bulk Phase 3 – Review */
.nm-crm-bulk-review {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
}

.nm-crm-bulk-review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface-muted, rgba(15, 23, 42, 0.03));
  font-size: 0.8125rem;
  line-height: 1.35;
}

.nm-crm-bulk-review-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

.nm-crm-bulk-review-summary__value {
  font-weight: 650;
  color: var(--nm-text, #0f172a);
}

.nm-crm-bulk-review-summary__label {
  color: var(--nm-text-muted, #64748b);
  font-weight: 500;
  text-transform: lowercase;
}

.nm-crm-bulk-review-summary__sep {
  color: var(--nm-text-muted, #94a3b8);
  margin: 0 0.2rem;
}

.nm-crm-bulk-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.35rem 0.15rem 0.15rem;
}

.nm-crm-bulk-review-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nm-text, #0f172a);
  cursor: pointer;
}

.nm-crm-bulk-review-select-all input:disabled + span {
  opacity: 0.55;
  cursor: default;
}

.nm-crm-bulk-review-selection-count {
  font-size: 0.8125rem;
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nm-crm-bulk-review-item {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
  background: var(--nm-surface, #fff);
}

.nm-crm-bulk-review-item.is-invalid {
  border-color: rgba(180, 35, 24, 0.35);
}

.nm-crm-bulk-review-item.is-existing {
  opacity: 0.78;
  background: var(--nm-surface-muted, rgba(15, 23, 42, 0.025));
}

.nm-crm-bulk-review-item.is-failed {
  background: rgba(252, 87, 87, 0.03);
}

.nm-crm-bulk-review-item.is-expanded {
  border-color: rgba(124, 92, 252, 0.28);
}

.nm-crm-bulk-review-item__row {
  display: grid;
  grid-template-columns:
    auto minmax(9.5rem, 1.35fr) minmax(7rem, 0.9fr) minmax(8.5rem, 1.05fr)
    minmax(9rem, 1.2fr) auto;
  gap: 0.65rem 1rem;
  align-items: start;
}

.nm-crm-bulk-review-check {
  display: flex;
  align-items: flex-start;
  padding-top: 0.15rem;
  margin: 0;
}

.nm-crm-bulk-review-item__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.nm-crm-bulk-review-item__company {
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--nm-text, #0f172a);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nm-crm-bulk-review-item__domain {
  font-size: 0.75rem;
  color: var(--nm-text-muted, #64748b);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nm-crm-bulk-review-item__edit-link {
  appearance: none;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-600, #6b46f2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
}

.nm-crm-bulk-review-item__edit-link:hover {
  color: var(--color-primary-700, #5b35e0);
  text-decoration: underline;
}

.nm-crm-bulk-review-item__group {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.nm-crm-bulk-review-item__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--nm-text-muted, #94a3b8);
}

.nm-crm-bulk-review-item__value {
  font-size: 0.8125rem;
  color: var(--nm-text, #0f172a);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.nm-crm-bulk-review-item__value:empty::before {
  content: "–";
  color: var(--nm-text-muted, #94a3b8);
}

.nm-crm-bulk-review-item__value--secondary {
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-review-item__group--reach
  .nm-crm-bulk-review-item__label
  + .nm-crm-bulk-review-item__value
  + .nm-crm-bulk-review-item__label {
  margin-top: 0.45rem;
}

.nm-crm-bulk-review-item__aside {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.nm-crm-bulk-review-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.nm-crm-bulk-review-badge[data-review-status="ready"] {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.nm-crm-bulk-review-badge[data-review-status="needs_review"] {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.nm-crm-bulk-review-badge[data-review-status="existing"] {
  color: #475569;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.nm-crm-bulk-review-badge[data-review-status="failed"] {
  color: #9f1239;
  background: #fff1f2;
  border-color: #fecdd3;
}

.nm-crm-bulk-review-item__meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-review-item__meta-link {
  color: var(--color-primary-600, #6b46f2);
  font-weight: 500;
  text-decoration: none;
}

.nm-crm-bulk-review-item__meta-link:hover {
  text-decoration: underline;
}

.nm-crm-bulk-review-item__error {
  margin-top: 0.65rem;
}

.nm-crm-bulk-review-item__error-summary {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--crm-status-danger-text, #b42318);
}

.nm-crm-bulk-review-item__error-toggle {
  appearance: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-600, #6b46f2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.nm-crm-bulk-review-item__error-details {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--nm-text-muted, #64748b);
}

.nm-crm-bulk-review-item__error-details p {
  margin: 0;
}

.nm-crm-bulk-review-item__error-details p + p {
  margin-top: 0.2rem;
}

.nm-crm-bulk-review-item__edit {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--crm-detail-border, rgba(15, 23, 42, 0.08));
}

.nm-crm-bulk-review-item__edit .nm-form-section {
  margin-top: 0;
}

.nm-crm-bulk-review-item__edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.nm-crm-bulk-review-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .nm-crm-bulk-review-item__row {
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "check identity identity status"
      "check contact reach status"
      "check address address status";
  }

  .nm-crm-bulk-review-check {
    grid-area: check;
  }
  .nm-crm-bulk-review-item__identity {
    grid-area: identity;
  }
  .nm-crm-bulk-review-item__group--contact {
    grid-area: contact;
  }
  .nm-crm-bulk-review-item__group--reach {
    grid-area: reach;
  }
  .nm-crm-bulk-review-item__group--address {
    grid-area: address;
  }
  .nm-crm-bulk-review-item__aside {
    grid-area: status;
  }
}

@media (max-width: 720px) {
  .nm-crm-bulk-review-item__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "check identity status"
      "check contact contact"
      "check reach reach"
      "check address address";
  }

  .nm-crm-bulk-review-item__company,
  .nm-crm-bulk-review-item__domain,
  .nm-crm-bulk-review-item__value,
  .nm-crm-bulk-review-item__value--secondary {
    overflow-wrap: anywhere;
  }

  .nm-crm-bulk-review-item__meta,
  .nm-crm-bulk-review-item__error {
    margin-left: 1.75rem;
  }
}

.nm-crm-bulk-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nm-crm-bulk-result-summary {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nm-text, #0f172a);
}

.nm-crm-bulk-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nm-crm-bulk-result-item {
  border: 1px solid var(--nm-border, #e2e8f0);
  border-radius: 0.65rem;
  padding: 0.75rem 0.9rem;
  background: var(--nm-surface, #fff);
}

.nm-crm-bulk-result-item__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nm-crm-bulk-result-item__title {
  font-weight: 600;
  font-size: 0.9rem;
}

.nm-crm-bulk-result-badge {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}

.nm-crm-bulk-result-item[data-result="created"] .nm-crm-bulk-result-badge {
  background: #dcfce7;
  color: #166534;
}

.nm-crm-bulk-result-item[data-result="duplicate"] .nm-crm-bulk-result-badge {
  background: #fef3c7;
  color: #92400e;
}

.nm-crm-bulk-result-item[data-result="error"] .nm-crm-bulk-result-badge {
  background: #fee2e2;
  color: #991b1b;
}

.nm-crm-bulk-result-item__link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-primary-600, #6b46f2);
}

.nm-crm-bulk-result-item__error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--nm-text-muted, #64748b);
}

body.nm-drawer-open {
  overflow: hidden;
}

/* CRM Detail Drawers – unified design system */
.nm-drawer__panel--xl {
  width: clamp(640px, 48vw, 820px);
  max-width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nm-drawer__panel--xl .nm-drawer__header {
  flex: 0 0 auto;
  padding: 24px 34px 20px;
}

.nm-drawer__panel--xl .nm-drawer__form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nm-drawer__panel--xl .nm-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 28px 34px 32px;
  -webkit-overflow-scrolling: touch;
}

.nm-drawer__panel--xl .nm-drawer__footer {
  flex: 0 0 auto;
  position: static;
  margin-top: 0;
  padding: 24px 34px;
  border-top: 1px solid var(--crm-detail-border);
  background: var(--crm-detail-surface);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
}

.nm-drawer__panel--xl .nm-form-section + .nm-form-section {
  margin-top: 36px;
  padding-top: 0;
  border-top: none;
}

.nm-drawer__panel--xl .nm-form-section__title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--crm-detail-border);
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--crm-detail-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nm-drawer__panel--xl .nm-form-section__title::after {
  display: none;
}

.nm-drawer__panel--xl .nm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 20px;
}

.nm-drawer__panel--xl .form-field {
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
}

.nm-drawer__panel--xl .form-field input,
.nm-drawer__panel--xl .form-field select,
.nm-drawer__panel--xl .form-field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.nm-drawer textarea.nm-drawer-textarea--analysis {
  min-height: 240px;
  line-height: 1.5;
  resize: vertical;
}

@media (max-width: 720px) {
  .nm-drawer__panel--xl {
    width: 100vw;
    max-width: 100vw;
  }

  .nm-drawer__panel--xl .nm-drawer__header,
  .nm-drawer__panel--xl .nm-drawer__body,
  .nm-drawer__panel--xl .nm-drawer__footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nm-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nm-form-grid__full {
    grid-column: auto;
  }
}

@media (max-width: 1280px) {
  .nm-crm-page .crm-stats-grid,
  #crmStatsGrid.crm-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .nm-crm-filters {
    grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(0, 1fr));
  }
  .nm-crm-filters > .nm-crm-reset {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .nm-crm-page .crm-stats-grid,
  #crmStatsGrid.crm-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .nm-crm-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nm-crm-filters > .nm-crm-search {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .nm-crm-page {
    padding: 20px 16px 28px;
  }
  .nm-crm-page .crm-stats-grid,
  #crmStatsGrid.crm-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .nm-crm-filters {
    grid-template-columns: 1fr;
  }
  .nm-crm-filters > .nm-crm-search,
  .nm-crm-filters > .nm-crm-reset {
    grid-column: 1;
  }
  .nm-form-grid,
  .nm-form-grid--address,
  .nm-drawer__panel--lg .nm-form-grid {
    grid-template-columns: 1fr;
  }
  .nm-drawer__panel--lg .nm-form-row--wide-left,
  .nm-drawer__panel--lg .nm-form-row--wide-right {
    grid-template-columns: 1fr;
  }
  .nm-drawer__panel,
  .nm-drawer__panel--lg {
    width: 100%;
  }
  .nm-crm-table-wrap {
    display: none !important;
  }
  .nm-crm-cards {
    display: grid !important;
  }
}

/* ==========================================================================
   CRM Detail SaaS (nm-crm-detail-page)
   ========================================================================== */

/*
 * Kritisch: Globales `section { flex-wrap: wrap }` erzeugt bei wachsendem
 * Inhalt (nach AJAX) eine zweite Flex-Spalte rechts – Layout wirkt dann
 * „zerstört“. Deshalb hier explizit nowrap + volle Breite.
 */
section.nm-crm-detail-page,
.nm-crm-detail-page {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  align-self: stretch;
  gap: 0;
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin: 0;
  padding: 24px 28px 48px;
  box-sizing: border-box;
  color: var(--crm-detail-text);
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

.nm-crm-detail-page [hidden] {
  display: none !important;
}

.nm-crm-detail-page [role="tabpanel"][hidden] {
  display: none !important;
}

/* —— Kopfbereich —— */
.nm-crm-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
  min-width: 0;
}

.nm-crm-detail-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 11px;
  font-size: 0.8125rem;
  color: var(--crm-detail-muted);
}

.nm-crm-detail-crumbs a {
  color: var(--crm-detail-muted);
  text-decoration: none;
}

.nm-crm-detail-crumbs a:hover {
  color: var(--accent);
}

.nm-crm-detail-crumbs__sep {
  opacity: 0.55;
}

.nm-crm-detail-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nm-crm-detail-identity {
  min-width: 0;
  flex: 1 1 280px;
}

.nm-crm-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 12px;
}

.nm-crm-detail-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--crm-detail-text);
  letter-spacing: -0.02em;
}

.nm-crm-fav-btn,
.nm-crm-icon-btn.nm-crm-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 10px);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.nm-crm-fav-btn svg,
.nm-crm-icon-btn.nm-crm-fav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

.nm-crm-fav-btn.is-active {
  color: var(--crm-fav, #ffc800);
  border-color: color-mix(
    in srgb,
    var(--crm-fav, #ffc800) 40%,
    var(--crm-detail-border)
  );
  background: color-mix(
    in srgb,
    var(--crm-fav, #ffc800) 12%,
    var(--crm-detail-surface)
  );
}

.nm-crm-fav-btn.is-active svg {
  fill: currentColor;
}

/* Status-Pills: siehe CRM Overview (eine Definition) */

.nm-crm-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.nm-crm-detail-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-pill, 999px);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-muted);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.nm-crm-detail-meta-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nm-crm-detail-meta-chip .nm-avatar {
  width: 18px;
  height: 18px;
  font-size: 0.55rem;
}

.nm-crm-detail-meta-chip--id {
  font-variant-numeric: tabular-nums;
}

/* —— Kopfaktionen —— */
.nm-crm-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn,
.nm-crm-detail-page .nm-crm-detail-actions .nm-crm-more-toggle {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--nm-radius-md, 8px);
  font-weight: 600;
  box-shadow: none !important;
  filter: none !important;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--primary {
  background: var(--nm-brand) !important;
  border: 1px solid var(--nm-brand) !important;
  color: #ffffff !important;
  padding: 0 18px;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--primary span,
.nm-crm-detail-page #crmDetailAkquiseMailBtn,
.nm-crm-detail-page #crmDetailAkquiseMailBtn span {
  color: #ffffff !important;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--primary:hover {
  background: #e94545 !important;
  border-color: #e94545 !important;
  color: #ffffff !important;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--primary svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--secondary {
  background: var(--crm-detail-surface) !important;
  color: var(--crm-detail-text) !important;
  border: 1px solid var(--crm-detail-border) !important;
}

.nm-crm-detail-page .nm-crm-detail-actions .nm-btn--secondary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  color: currentColor;
}

/* Overview-Regel .nm-crm-more-toggle { width:34px } überschreiben */
.nm-crm-detail-page .nm-crm-more-toggle,
.nm-crm-detail-page #crmDetailMoreToggle.nm-crm-more-toggle {
  width: auto !important;
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid var(--crm-detail-border) !important;
  border-radius: var(--nm-radius-md, 8px) !important;
  background: var(--crm-detail-surface) !important;
  color: var(--crm-detail-text) !important;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
}

.nm-crm-detail-page .nm-crm-more-toggle svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  stroke: currentColor;
}

.nm-crm-more {
  position: relative;
}

.nm-crm-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--crm-detail-border);
  border-radius: 12px;
  background: var(--crm-detail-surface);
  box-shadow: var(--crm-detail-shadow);
}

.nm-crm-more-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--crm-detail-text);
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.nm-crm-more-menu button:hover {
  background: var(--crm-detail-hover);
}

.nm-crm-more-menu button.is-danger {
  color: var(--crm-status-danger-text);
}

/* —— 2-Spalten-Layout —— */
.nm-crm-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(380px, 420px) minmax(0, 1fr) !important;
  gap: 18px;
  align-items: start;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.nm-crm-detail-aside {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  position: static !important;
  float: none !important;
  left: auto !important;
  margin: 0 !important;
}

.nm-crm-detail-workspace {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--crm-detail-surface);
  box-shadow: var(--crm-detail-shadow);
  overflow: hidden;
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

/* —— Info-Karten —— */
.nm-crm-detail-card {
  border-radius: var(--nm-radius-xl, 14px);
  padding: 20px;
  border: 1px solid var(--crm-detail-border);
  background: var(--crm-detail-surface);
  box-shadow: var(--crm-detail-shadow);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
  filter: none;
}

.nm-crm-detail-page .form-field {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

.nm-crm-detail-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.nm-crm-detail-card__header h3,
.nm-crm-detail-card > h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--crm-detail-text);
}

.nm-crm-detail-card .nm-btn--sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8125rem;
}

.nm-crm-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nm-crm-info-list--compact {
  margin-top: 14px;
}

.nm-crm-info-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

.nm-crm-info-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--nm-radius-md, 10px);
  background: var(--crm-detail-hover);
  color: var(--app-text-muted);
  flex-shrink: 0;
}

.nm-crm-info-row__icon svg,
.nm-crm-detail-aside svg.nm-icon,
.nm-crm-detail-aside .nm-crm-info-row__icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: var(--app-text-muted) !important;
  color: var(--app-text-muted) !important;
  stroke-width: 1.85;
}

html[data-theme="dark"] .nm-crm-info-row__icon,
html[data-theme="dark"] .nm-crm-info-row__icon svg,
html[data-theme="dark"] .nm-crm-detail-aside .nm-crm-info-row__icon svg {
  color: #9aa7b7 !important;
  stroke: #9aa7b7 !important;
  fill: none !important;
}

.nm-crm-info-row__value {
  font-size: 0.875rem;
  color: var(--crm-detail-text);
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nm-crm-info-row__value a {
  color: var(--app-text) !important;
  text-decoration: none;
  display: inline;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 500;
}

.nm-crm-info-row__value a:hover {
  color: var(--app-text) !important;
  text-decoration: underline;
}

html[data-theme="dark"] .nm-crm-info-row__value a,
html[data-theme="dark"] .nm-crm-info-row__value a:hover {
  color: #f8fafc !important;
}

/* Aside Bearbeiten-/Icon-Buttons: Outline, kein Fill */
.nm-crm-detail-aside .nm-btn--sm svg,
.nm-crm-detail-aside .nm-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  color: var(--app-text-muted);
}

.nm-crm-detail-aside .nm-btn--sm {
  background: var(--crm-detail-hover);
  border-color: var(--crm-detail-border);
  color: var(--crm-detail-text);
}

.nm-crm-info-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nm-crm-info-row__label {
  font-size: 0.75rem;
  color: var(--crm-detail-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.nm-crm-info-row__value--multiline {
  display: block;
  line-height: 1.45;
}

.nm-crm-detail-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.nm-crm-detail-person__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nm-crm-detail-person__body strong {
  font-size: 0.9375rem;
  color: var(--crm-detail-text);
}

.nm-crm-detail-person__role {
  font-size: 0.8125rem;
  color: var(--crm-detail-muted);
}

.nm-crm-detail-dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.nm-crm-detail-dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.nm-crm-detail-dl dt {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--crm-detail-muted);
  font-weight: 500;
}

.nm-crm-detail-dl dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--crm-detail-text);
  word-break: break-word;
}

.nm-crm-detail-empty-text {
  margin: 0;
  color: var(--crm-detail-muted);
  font-size: 0.875rem;
}

/* —— Tabs —— */
.nm-crm-detail-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 4px;
  list-style: none;
  border: 0;
  border-bottom: 1px solid var(--crm-detail-border);
  border-radius: 0;
  background: var(--crm-detail-surface);
  overflow: visible;
}

.nm-crm-detail-tab.tablinks,
.nm-crm-detail-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--crm-detail-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.nm-crm-detail-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  color: inherit;
}

.nm-crm-detail-tab:hover {
  color: var(--crm-detail-text);
  background: transparent !important;
}

.nm-crm-detail-tab.active,
.nm-crm-detail-tab[aria-selected="true"] {
  color: var(--nm-brand);
  font-weight: 600;
  background: transparent !important;
}

.nm-crm-tab-notes-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--crm-status-danger-text, #dc2626);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.nm-crm-tab-notes-indicator[hidden] {
  display: none;
}

.nm-crm-detail-tab.active::after,
.nm-crm-detail-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: var(--nm-brand);
  border-radius: 2px 2px 0 0;
}

.nm-crm-detail-panels {
  padding: 20px;
  min-width: 0;
  background: var(--crm-detail-surface);
}

.nm-crm-detail-panel.tabcontent,
.nm-crm-detail-panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.nm-crm-detail-panel[style*="display: flex"],
.nm-crm-detail-panel[style*="display:flex"] {
  display: flex !important;
}

/* —— Aktivität: 3-Spalten + Timeline über 1–2 —— */
.nm-crm-activity-layout,
.nm-crm-activity-overview {
  display: grid;
  grid-template-columns:
    minmax(420px, 1.35fr)
    minmax(320px, 0.95fr)
    minmax(0, 0.85fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.nm-crm-interaction-card {
  grid-column: 1;
}
.nm-crm-followup-card,
.nm-crm-detail-followup-card {
  grid-column: 2;
}
.nm-crm-statistics-card,
.nm-crm-detail-stats-card {
  grid-column: 3;
  min-width: 0;
}

.nm-crm-detail-stats-card {
  container-type: inline-size;
  container-name: crm-detail-stats;
  overflow: visible;
}

.nm-crm-timeline-card,
.nm-crm-activity-timeline {
  grid-column: 1 / 3;
}

.nm-crm-detail-composer h4 {
  margin: 0 0 14px;
}

.nm-crm-detail-composer .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.nm-crm-detail-composer .form-field > span {
  font-size: 0.8125rem;
  color: var(--crm-detail-muted);
  font-weight: 500;
}

.nm-crm-detail-composer select,
.nm-crm-detail-composer textarea,
.nm-crm-detail-composer input:not([type="checkbox"]):not([type="radio"]),
.nm-crm-detail-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.nm-crm-detail-filter-bar select,
.nm-crm-detail-toolbar select,
.nm-drawer .form-field input:not([type="checkbox"]):not([type="radio"]),
.nm-drawer .form-field select,
.nm-drawer .form-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-text);
  font: inherit;
  box-sizing: border-box;
  box-shadow: none;
}

/* Icon-Inputs: Spezifität muss die spätere Drawer-Shorthand inkl. :not() schlagen */
.nm-drawer .form-field .nm-input-with-icon > input:not([type="checkbox"]):not([type="radio"]),
.nm-drawer .form-field .nm-input-with-icon > select {
  padding: 0 12px 0 42px;
}
.nm-drawer .form-field .nm-input-with-icon > select {
  padding-right: 2rem;
}
.nm-drawer .form-field .nm-input-with-icon--textarea > textarea,
.nm-drawer .form-field .nm-input-with-icon > textarea {
  padding: 10px 12px 10px 42px;
}

.nm-crm-detail-composer textarea {
  min-height: 104px;
  resize: vertical;
}

.nm-crm-detail-composer__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.nm-crm-detail-composer__actions .nm-btn--primary {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  background: var(--nm-brand);
  border: 1px solid var(--nm-brand);
  color: #fff;
  box-shadow: none;
}

.nm-crm-detail-composer__actions .nm-btn--primary svg {
  stroke: #fff;
  color: #fff;
}

/* Follow-up: kein roter Glow / kein Rot-Hintergrund */
.nm-crm-detail-followup-card,
.nm-crm-followup-card.nm-crm-detail-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--crm-detail-border) !important;
  background: var(--crm-detail-surface) !important;
  box-shadow: var(--crm-detail-shadow) !important;
  filter: none !important;
}

.nm-crm-detail-followup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nm-crm-detail-followup-skeleton {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.nm-crm-detail-followup-skeleton__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.nm-crm-detail-followup-skeleton__title {
  flex: 1 1 auto;
  width: 62%;
  max-width: 100%;
  height: 1.05rem;
  margin-bottom: 0;
}

.nm-crm-detail-followup-skeleton__badge {
  flex: 0 0 auto;
  width: 5.25rem;
  height: 1.35rem;
  margin-bottom: 0;
  border-radius: 999px;
}

.nm-crm-detail-followup-skeleton__timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding-left: 20px;
}

.nm-crm-detail-followup-skeleton__timeline-line {
  margin-bottom: 0;
}

.nm-crm-detail-followup-skeleton__timeline-line--short {
  width: 55%;
}

.nm-crm-detail-followup-skeleton__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.nm-crm-detail-followup-skeleton__meta .nm-skeleton {
  margin-bottom: 0;
}

.nm-crm-detail-followup-skeleton__btn {
  width: 100%;
  height: 2.5rem;
  margin-top: auto;
  margin-bottom: 0;
  border-radius: var(--nm-radius-md, 8px);
}

.nm-crm-detail-followup-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.nm-crm-detail-followup-filled {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.nm-crm-detail-followup-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.nm-crm-detail-followup-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--crm-detail-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}

.nm-crm-followup-timeline {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nm-crm-followup-timeline__item {
  position: relative;
  padding: 0 0 14px 20px;
}

.nm-crm-followup-timeline__item:last-child {
  padding-bottom: 0;
}

.nm-crm-followup-timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crm-detail-border, #e5e7eb);
  box-shadow: 0 0 0 2px var(--crm-detail-hover, #f3f4f6);
}

.nm-crm-followup-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 2px;
  width: 2px;
  background: var(--crm-detail-border, #e5e7eb);
}

.nm-crm-followup-timeline__item.is-sent::before {
  background: var(--color-success-500, #22c55e);
}

.nm-crm-followup-timeline__item.is-planned::before,
.nm-crm-followup-timeline__item.is-due_today::before {
  background: var(--color-primary-500, #7c5cfc);
}

.nm-crm-followup-timeline__item.is-overdue::before {
  background: var(--color-danger-500, #fc5757);
}

.nm-crm-followup-timeline__item.is-waiting::before {
  background: var(--crm-detail-muted, #9ca3af);
  opacity: 0.55;
}

.nm-crm-followup-timeline__item.is-current::before {
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--color-primary-500, #7c5cfc) 22%, transparent);
}

.nm-crm-followup-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.nm-crm-followup-timeline__step {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--crm-detail-text);
}

.nm-crm-followup-timeline__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  background: var(--crm-detail-hover, #f3f4f6);
  color: var(--crm-detail-muted);
}

.nm-crm-followup-timeline__item.is-sent .nm-crm-followup-timeline__status {
  background: color-mix(
    in srgb,
    var(--color-success-500, #22c55e) 14%,
    transparent
  );
  color: var(--color-success-700, #15803d);
}

.nm-crm-followup-timeline__item.is-planned .nm-crm-followup-timeline__status,
.nm-crm-followup-timeline__item.is-due_today .nm-crm-followup-timeline__status {
  background: color-mix(
    in srgb,
    var(--color-primary-500, #7c5cfc) 14%,
    transparent
  );
  color: var(--color-primary-700, #6b46f2);
}

.nm-crm-followup-timeline__item.is-overdue .nm-crm-followup-timeline__status {
  background: color-mix(
    in srgb,
    var(--color-danger-500, #fc5757) 14%,
    transparent
  );
  color: var(--color-danger-700, #dc2626);
}

.nm-crm-followup-timeline__item.is-waiting .nm-crm-followup-timeline__status {
  background: transparent;
  color: var(--crm-detail-muted);
  padding-left: 0;
  padding-right: 0;
}

.nm-crm-followup-timeline__detail {
  margin: 4px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--crm-detail-muted);
}

.nm-crm-detail-followup-meta,
.nm-crm-followup-meta {
  display: grid;
  gap: 14px;
}

.nm-crm-followup-meta--completed {
  gap: 12px;
}

.nm-crm-detail-followup-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nm-crm-detail-followup-kpi__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--crm-detail-text);
  line-height: 1.35;
}

.nm-crm-detail-followup-plan,
#crmDetailPlanFollowupBtn.nm-crm-detail-followup-plan {
  margin-top: 18px;
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.nm-crm-detail-followup-due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--crm-detail-text);
}

.nm-crm-detail-followup-due.is-overdue {
  color: #d92d20;
}

.nm-crm-detail-followup-due-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nm-crm-detail-followup-due-date svg {
  width: 16px;
  height: 16px;
  color: var(--crm-detail-muted);
  stroke: currentColor;
}

.nm-crm-detail-badge {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 4px 9px;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 12px;
  font-weight: 600;
}

.nm-crm-detail-badge.is-danger {
  background: #fff0f0;
  color: #d92d20;
}

html[data-theme="dark"] .nm-crm-detail-badge.is-danger {
  background: rgba(252, 79, 79, 0.14);
  color: #ff8585;
}

.nm-crm-detail-followup-label,
.nm-crm-detail-followup-last > span:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--crm-detail-muted);
  font-weight: 500;
}

.nm-crm-detail-followup-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.nm-crm-detail-followup-last {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--crm-detail-text);
  line-height: 1.4;
}

.nm-crm-detail-followup-complete,
#crmDetailCompleteFollowupBtn {
  margin-top: 18px;
  width: 100%;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0 !important;
  border-radius: var(--nm-radius-md, 10px);
  background: #d8f5e6 !important;
  color: #157a4b !important;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  box-shadow: none !important;
  filter: none !important;
}

.nm-crm-detail-followup-complete__icon,
#crmDetailCompleteFollowupBtn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  fill: none !important;
  stroke: #157a4b !important;
  color: #157a4b !important;
}

.nm-crm-detail-followup-complete span,
#crmDetailCompleteFollowupBtn span {
  color: #157a4b !important;
}

html[data-theme="dark"] .nm-crm-detail-followup-complete,
html[data-theme="dark"] #crmDetailCompleteFollowupBtn {
  background: rgba(21, 122, 75, 0.22) !important;
  color: #6ee7a0 !important;
}

html[data-theme="dark"] .nm-crm-detail-followup-complete__icon,
html[data-theme="dark"] #crmDetailCompleteFollowupBtn svg,
html[data-theme="dark"] .nm-crm-detail-followup-complete span,
html[data-theme="dark"] #crmDetailCompleteFollowupBtn span {
  color: #6ee7a0 !important;
  stroke: #6ee7a0 !important;
}

.nm-crm-detail-followup-complete:hover,
#crmDetailCompleteFollowupBtn:hover {
  filter: none;
  background: #c6efd9 !important;
  opacity: 1;
}

/* Stats */
.nm-crm-stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.nm-crm-stat-mini {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 10px);
  background: var(--crm-detail-surface);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-items: start;
  box-sizing: border-box;
}

.nm-crm-stat-mini__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  align-self: center;
}

.nm-crm-stat-mini__icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.nm-crm-stat-mini--interactions .nm-crm-stat-mini__icon {
  background: #fff0f0;
  color: var(--nm-brand);
}
.nm-crm-stat-mini--last .nm-crm-stat-mini__icon {
  background: #fff7df;
  color: #b7791f;
}
.nm-crm-stat-mini--followups .nm-crm-stat-mini__icon {
  background: #f2ebff;
  color: #7a4dd8;
}
.nm-crm-stat-mini--emails .nm-crm-stat-mini__icon {
  background: #eafaf1;
  color: #168a4b;
}

html[data-theme="dark"]
  .nm-crm-stat-mini--interactions
  .nm-crm-stat-mini__icon {
  background: rgba(252, 79, 79, 0.14);
  color: #ff8585;
}
html[data-theme="dark"] .nm-crm-stat-mini--last .nm-crm-stat-mini__icon {
  background: rgba(240, 180, 41, 0.14);
  color: #f7c948;
}
html[data-theme="dark"] .nm-crm-stat-mini--followups .nm-crm-stat-mini__icon {
  background: rgba(122, 77, 216, 0.16);
  color: #c4b5fd;
}
html[data-theme="dark"] .nm-crm-stat-mini--emails .nm-crm-stat-mini__icon {
  background: rgba(50, 200, 117, 0.14);
  color: #6ee7a0;
}

.nm-crm-stat-mini__label {
  font-size: 0.6875rem;
  color: var(--crm-detail-muted);
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.nm-crm-stat-mini__value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--crm-detail-text);
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.nm-crm-stat-mini--last .nm-crm-stat-mini__value {
  font-size: 0.8125rem;
}

@container crm-detail-stats (max-width: 520px) {
  .nm-crm-stats-mini-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Timeline */
.nm-crm-activity-timeline.nm-crm-detail-card,
.nm-crm-timeline-card.nm-crm-detail-card {
  padding: 16px 20px 12px;
}

.nm-crm-detail-timeline-header {
  padding: 0 0 4px;
}

.nm-crm-detail-timeline-header h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}

.nm-crm-detail-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  max-height: 420px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.nm-crm-detail-timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 1px;
  background: var(--crm-detail-border);
}

.nm-crm-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--crm-detail-border);
}

.nm-crm-timeline-item:last-child {
  border-bottom: 0;
}

.nm-crm-timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 9px;
}

.nm-crm-timeline-rail::before {
  display: none;
}

.nm-crm-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crm-detail-muted);
  box-shadow: 0 0 0 3px var(--crm-detail-surface);
  z-index: 1;
}

.nm-crm-timeline-dot.is-mail {
  background: #3b82f6;
}
.nm-crm-timeline-dot.is-phone {
  background: #14b8a6;
}
.nm-crm-timeline-dot.is-note {
  background: #f59f00;
}
.nm-crm-timeline-dot.is-followup,
.nm-crm-timeline-dot.is-status {
  background: #7a5af8;
}
.nm-crm-timeline-dot.is-success,
.nm-crm-timeline-dot.is-contact {
  background: #12b76a;
}
.nm-crm-timeline-dot.is-default {
  background: #98a2b3;
}

.nm-crm-timeline-main {
  display: contents;
}

.nm-crm-timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--crm-detail-hover);
  color: var(--crm-detail-muted);
  flex-shrink: 0;
}

.nm-crm-timeline-icon.is-mail {
  background: #edf5ff;
  color: #3b82f6;
}
.nm-crm-timeline-icon.is-phone {
  background: #e6fffa;
  color: #0f766e;
}
.nm-crm-timeline-icon.is-note {
  background: #fff7df;
  color: #b7791f;
}
.nm-crm-timeline-icon.is-followup,
.nm-crm-timeline-icon.is-status {
  background: #f2ebff;
  color: #7a4dd8;
}
.nm-crm-timeline-icon.is-success,
.nm-crm-timeline-icon.is-contact {
  background: #eafaf1;
  color: #168a4b;
}

html[data-theme="dark"] .nm-crm-timeline-icon.is-mail {
  background: rgba(59, 130, 246, 0.14);
  color: #7fb1ff;
}
html[data-theme="dark"] .nm-crm-timeline-icon.is-phone {
  background: rgba(20, 184, 166, 0.14);
  color: #5eead4;
}
html[data-theme="dark"] .nm-crm-timeline-icon.is-note {
  background: rgba(240, 180, 41, 0.14);
  color: #f7c948;
}
html[data-theme="dark"] .nm-crm-timeline-icon.is-followup,
html[data-theme="dark"] .nm-crm-timeline-icon.is-status {
  background: rgba(122, 77, 216, 0.16);
  color: #c4b5fd;
}
html[data-theme="dark"] .nm-crm-timeline-icon.is-success,
html[data-theme="dark"] .nm-crm-timeline-icon.is-contact {
  background: rgba(50, 200, 117, 0.14);
  color: #6ee7a0;
}

.nm-crm-timeline-icon svg {
  width: 18px;
  height: 18px;
}

.nm-crm-timeline-body {
  min-width: 0;
}

.nm-crm-timeline-body strong,
.nm-crm-timeline-item__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--crm-detail-text);
  margin-bottom: 0;
}

.nm-crm-timeline-desc,
.nm-crm-timeline-item__description {
  margin: 3px 0 0;
  font-size: 0.875rem;
  color: var(--crm-detail-muted);
  line-height: 1.45;
}

.nm-crm-timeline-meta,
.nm-crm-timeline-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--crm-detail-muted);
}

.nm-crm-timeline-menu {
  position: relative;
  align-self: start;
}

.nm-crm-timeline-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--crm-detail-muted);
  cursor: pointer;
}

.nm-crm-timeline-menu-toggle:hover,
.nm-crm-timeline-menu-toggle[aria-expanded="true"] {
  border-color: var(--crm-detail-border);
  background: var(--crm-detail-hover);
  color: var(--crm-detail-text);
}

.nm-crm-timeline-menu-toggle svg {
  width: 16px;
  height: 16px;
}

.nm-crm-timeline-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 10px);
  background: var(--crm-detail-surface);
  box-shadow: var(--crm-detail-shadow);
}

.nm-crm-timeline-menu-panel button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--crm-detail-text);
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.nm-crm-timeline-menu-panel button:hover {
  background: var(--crm-detail-hover);
}

.nm-crm-timeline-menu-panel button.is-danger {
  color: var(--crm-status-danger-text);
}

/* —— Tab toolbars / lists —— */
.nm-crm-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.nm-crm-detail-toolbar h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.nm-crm-detail-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.nm-crm-detail-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nm-crm-detail-filter-bar input,
.nm-crm-detail-filter-bar select {
  min-width: 0;
  flex: 1 1 140px;
  max-width: 220px;
}

.nm-crm-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

/* —— Notizen (Detail-Tab, Breite wie bisherige Notizen-Spalte) —— */
.nm-crm-notes-analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  width: 100%;
}

.nm-crm-notes-section,
.nm-crm-analysis-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.nm-crm-analysis-audit {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  min-width: 0;
  width: 100%;
}

.nm-crm-analysis-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
  width: 100%;
  min-width: 0;
}

.nm-crm-analysis-kpi.nm-stat-card {
  min-width: 0;
  cursor: default;
}

.nm-crm-analysis-kpi.nm-stat-card:hover {
  transform: none;
  border-color: var(--nm-border, var(--border-subtle));
  box-shadow: var(--nm-shadow-sm, var(--shadow-sm));
}

.nm-crm-analysis-kpi[data-kpi-placeholder="true"] .metric-value {
  letter-spacing: -0.01em;
  color: var(--nm-text-muted, var(--text-muted));
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.nm-crm-analysis-section {
  background: var(--crm-detail-hover, #f3f4f6);
  border-color: var(--crm-detail-border, #e5e7eb);
}

#tab-analysis .nm-crm-analysis-section {
  max-width: none;
}

.nm-crm-analysis-toolbar {
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

.nm-crm-analysis-heading-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  min-width: 0;
  flex: 1 1 auto;
}

.nm-crm-analysis-heading-wrap h4 {
  margin: 0;
}

.nm-crm-analysis-quality,
.nm-crm-analysis-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-quality.nm-crm-status-pill {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}

.nm-crm-analysis-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2, 0.5rem);
  flex-shrink: 0;
}

/* KPI skeleton ↔ content (data-kpis-state: loading | ready | empty) */
.nm-crm-analysis-kpi.nm-stat-card {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
  padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem)
    var(--space-3, 0.75rem);
  gap: 0;
}

.nm-crm-analysis-kpi__content,
.nm-crm-analysis-kpi__skeleton {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.15rem;
  text-align: left;
}

.nm-crm-analysis-kpi__content {
  display: none;
}

.nm-crm-analysis-kpi__skeleton {
  display: flex;
}

.nm-crm-analysis-kpi__skeleton .nm-skeleton--value {
  width: 42%;
  height: 1.35rem;
  margin-top: 0.15rem;
}

.nm-crm-analysis-kpi__skeleton .nm-skeleton--status {
  width: 68%;
  height: 0.7rem;
}

.nm-crm-analysis-kpi__skeleton .nm-skeleton--link {
  margin-top: auto;
}

.nm-crm-analysis-kpi__skeleton--preview .nm-skeleton--thumbnail {
  flex: 0 0 auto;
  height: 3.25rem;
}

.nm-crm-analysis-kpis[data-kpis-state="ready"] .nm-crm-analysis-kpi__skeleton,
.nm-crm-analysis-kpis[data-kpis-state="empty"] .nm-crm-analysis-kpi__skeleton {
  display: none;
}

.nm-crm-analysis-kpis[data-kpis-state="ready"] .nm-crm-analysis-kpi__content,
.nm-crm-analysis-kpis[data-kpis-state="empty"] .nm-crm-analysis-kpi__content {
  display: flex;
}

.nm-crm-analysis-kpi__content .metric-label {
  margin-bottom: 0.1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-kpi__content .metric-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--nm-text, var(--text-primary, #0f172a));
}

.nm-crm-analysis-kpi__content .metric-status {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-kpi__content .metric-status[hidden] {
  display: none !important;
}

.nm-crm-analysis-kpi__content .metric-hint {
  margin-top: 0.05rem;
  font-size: 0.6875rem;
  font-weight: 450;
  line-height: 1.3;
  color: var(--nm-text-muted, var(--text-muted));
  opacity: 0.9;
}

.nm-crm-analysis-kpis[data-kpis-state="empty"]
  .nm-crm-analysis-kpi__content
  .metric-value,
.nm-crm-analysis-kpi[data-kpi-placeholder="true"] .metric-value {
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-kpi[data-kpi-tone="high"] .metric-value {
  color: var(--color-primary-700, #5b35e0);
}

.nm-crm-analysis-kpi[data-kpi-tone="medium"] .metric-value {
  color: var(--color-warning-700, #a16207);
}

.nm-crm-analysis-kpi[data-kpi-tone="low"] .metric-value {
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-kpi[data-kpi-tone="critical"] .metric-value {
  color: var(--color-danger-600, #dc2626);
}

.nm-crm-analysis-kpi[data-kpi-tone="coverage"] .metric-value {
  color: var(--nm-text, var(--text-primary, #0f172a));
}

.nm-crm-analysis-preview-thumb-wrap {
  position: relative;
  width: 100%;
  margin: 0.15rem 0 var(--space-2, 0.5rem);
  min-height: 3.25rem;
}

.nm-crm-analysis-kpis[data-kpis-state="empty"]
  .nm-crm-analysis-preview-thumb-wrap {
  display: block;
}

.nm-crm-analysis-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: color-mix(
    in srgb,
    var(--nm-surface-muted, #f8fafc) 88%,
    transparent
  );
}

.nm-crm-analysis-preview-empty[hidden] {
  display: none !important;
}

.nm-crm-analysis-preview-empty__mark {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-preview-empty__text {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-preview-thumb-skeleton {
  display: block;
  width: 100%;
  height: 3.25rem;
  border-radius: var(--radius-md, 8px);
}

.nm-crm-analysis-preview-thumb-skeleton[hidden] {
  display: none !important;
}

.nm-crm-analysis-status.is-running {
  color: var(--color-primary, var(--nm-primary, #7c5cfc));
}

.nm-crm-analysis-status.is-reconnecting {
  color: var(--color-warning-700, #a16207);
}

.nm-crm-analysis-status.is-error {
  color: var(--color-danger-600, #dc2626);
}

.nm-crm-analysis-kpi-detail {
  align-self: flex-start;
  margin-top: auto;
  padding-inline: 0;
  min-height: auto;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-kpi-detail:hover:not(:disabled) {
  color: var(--color-primary-600, var(--nm-primary, #6b46f2));
}

.nm-crm-analysis-kpi--preview .metric-value {
  font-size: 1rem;
}

.nm-crm-analysis-preview-thumb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  max-height: 4.5rem;
}

.nm-crm-analysis-preview-thumb:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-primary-300, #c4b5fd));
  outline-offset: 2px;
}

.nm-crm-analysis-preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top center;
}

.nm-crm-analysis-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  max-height: min(70vh, 560px);
  overflow: auto;
  min-width: 0;
}

.nm-crm-analysis-detail-section h5 {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 0.9375rem;
}

.nm-crm-analysis-detail-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.nm-crm-analysis-detail-list li {
  min-width: 0;
}

.nm-crm-analysis-detail-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--nm-text-muted, var(--text-muted));
}

/* CRM Website-Analyse: KPI-Detailmodals */
.analysis-detail-intro {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 0.875rem;
  color: var(--nm-text-muted, var(--text-muted));
  text-align: left;
}

.analysis-detail-lead,
.analysis-detail-meta {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 0.875rem;
  color: var(--nm-text-muted, var(--text-muted));
  text-align: left;
}

.analysis-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3, 0.75rem);
}

.analysis-detail-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.analysis-detail-card {
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
  text-align: left;
}

.analysis-detail-card--stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.analysis-detail-card__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 0.9375rem;
  font-weight: 600;
}

.analysis-detail-card__sub {
  margin-top: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--nm-border, var(--border-subtle));
}

.analysis-detail-card__subtitle {
  display: block;
  margin-bottom: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-detail-section-title {
  margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

.analysis-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2, 0.5rem);
}

.analysis-metric-grid--compact {
  gap: var(--space-1, 0.25rem);
}

.analysis-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.analysis-metric-label {
  font-size: 0.8125rem;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-metric-value {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.analysis-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.analysis-status--ok {
  background: color-mix(
    in srgb,
    var(--color-success, #22c55e) 12%,
    transparent
  );
  color: var(--color-success-700, #15803d);
}

.analysis-status--warn {
  background: color-mix(
    in srgb,
    var(--color-warning, #f9f871) 35%,
    transparent
  );
  color: var(--nm-text, #374151);
}

.analysis-status--danger {
  background: color-mix(in srgb, var(--color-danger, #fc5757) 12%, transparent);
  color: var(--color-danger-700, #b91c1c);
}

.analysis-status--neutral {
  background: var(--nm-surface-muted, #f3f4f6);
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-finding-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  text-align: left;
}

.analysis-finding-item {
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
}

.analysis-finding-item__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 0.9375rem;
  font-weight: 600;
}

.analysis-finding-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.analysis-finding-item__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nm-text, inherit);
  text-align: left;
}

.analysis-audit-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  text-align: left;
}

.nm-crm-analysis-detail-modal .analysis-audit-modal p,
.nm-crm-analysis-detail-modal .analysis-audit-modal table,
.nm-crm-analysis-detail-modal .analysis-audit-modal li,
.nm-crm-analysis-detail-modal .analysis-audit-modal h5,
.nm-crm-analysis-detail-modal .analysis-audit-modal article {
  text-align: left;
}

.nm-crm-analysis-modal-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--nm-text-muted, var(--text-muted));
  text-align: center;
}

.nm-crm-analysis-detail-empty {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nm-text-muted, var(--text-muted));
  text-align: left;
}

.analysis-perf-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.analysis-perf-score-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
}

.analysis-perf-score-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-perf-score-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--nm-text, inherit);
}

.analysis-perf-score-card__band {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary, var(--nm-primary, #7c5cfc));
}

.analysis-lab-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-1, 0.25rem);
}

.analysis-lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.analysis-lab-table th,
.analysis-lab-table td {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--nm-border, var(--border-subtle));
  vertical-align: top;
}

.analysis-lab-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-lab-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--nm-text, inherit);
  min-width: 8rem;
}

.analysis-lab-table__metric {
  display: block;
  font-weight: 600;
}

.analysis-lab-table__hint {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-lab-table__value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.analysis-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.analysis-category-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  min-height: 4.5rem;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
  text-align: left;
}

.analysis-category-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nm-text-muted, var(--text-muted));
  line-height: 1.35;
}

.analysis-category-card__count {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.analysis-seo-cards-wrap--mobile {
  display: none;
}

.analysis-seo-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.analysis-seo-card {
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
  text-align: left;
}

.analysis-seo-card__head {
  margin-bottom: var(--space-2, 0.5rem);
}

.analysis-seo-card__head strong {
  display: block;
  font-size: 0.9375rem;
}

.analysis-seo-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: 0.35rem 0;
  border-top: 1px solid var(--nm-border, var(--border-subtle));
}

.analysis-seo-card__row:first-of-type {
  border-top: none;
}

.analysis-seo-card__row-label {
  font-size: 0.8125rem;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-finding-item--details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}

.analysis-finding-item--details summary::-webkit-details-marker {
  display: none;
}

.analysis-finding-item__cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, var(--nm-primary, #7c5cfc));
}

.analysis-finding-item__title-inline {
  font-size: 0.875rem;
  font-weight: 500;
}

.analysis-finding-item--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.analysis-seo-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-2, 0.5rem);
}

.analysis-seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.analysis-seo-table th,
.analysis-seo-table td {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--nm-border, var(--border-subtle));
  vertical-align: top;
}

.analysis-seo-table th {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--nm-text-muted, var(--text-muted));
}

.analysis-seo-table__page strong {
  display: block;
}

.analysis-page-item__url {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--nm-text-muted, var(--text-muted));
  word-break: break-all;
}

.analysis-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.analysis-page-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface, #fff);
}

.analysis-page-item__main {
  min-width: 0;
  flex: 1 1 auto;
}

.analysis-detail-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.analysis-detail-tags li {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.8125rem;
  background: var(--nm-surface-muted, #f3f4f6);
  color: var(--nm-text, inherit);
}

.nm-crm-analysis-preview-open {
  margin-top: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
}

.nm-crm-analysis-preview-thumb {
  display: block;
  width: 100%;
  margin-top: var(--space-2, 0.5rem);
  padding: 0;
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--nm-surface-muted, #f9fafb);
  cursor: pointer;
}

.nm-crm-analysis-preview-thumb:not([hidden]) img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  object-position: top center;
}

.nm-crm-analysis-screenshot-frame--mobile img {
  max-width: min(390px, 100%);
  margin: 0 auto;
}

.nm-crm-analysis-detail-modal {
  max-width: min(880px, calc(100vw - 2rem));
}

.nm-crm-analysis-screenshot-modal {
  max-width: min(960px, calc(100vw - 2rem));
}

.nm-crm-analysis-screenshot-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.nm-crm-analysis-screenshot-tab.is-active {
  border-color: var(--color-primary, var(--nm-primary, #7c5cfc));
  color: var(--color-primary, var(--nm-primary, #7c5cfc));
}

.nm-crm-analysis-screenshot-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
  max-height: min(70vh, 640px);
  overflow: auto;
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  background: var(--nm-surface-muted, #f9fafb);
}

.nm-crm-analysis-screenshot-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

.nm-crm-analysis-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
  width: 100%;
}

.nm-crm-analysis-progress-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  min-width: 0;
}

.nm-crm-analysis-progress-status {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.nm-crm-analysis-progress-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid
    color-mix(
      in srgb,
      var(--nm-primary, var(--color-primary, #7c5cfc)) 25%,
      transparent
    );
  border-top-color: var(--nm-primary, var(--color-primary, #7c5cfc));
  animation: nm-crm-analysis-progress-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes nm-crm-analysis-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-crm-analysis-progress-spinner {
    animation: none;
    border-top-color: var(--nm-primary, var(--color-primary, #7c5cfc));
    opacity: 0.65;
  }
}

.nm-crm-analysis-progress-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-progress-hint {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-progress-percent {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  color: var(--nm-text-muted, var(--text-muted));
}

.nm-crm-analysis-progress-track {
  width: 100%;
  height: 9px;
  border-radius: var(--radius-full, 9999px);
  background: var(--nm-border, var(--border-subtle, #e5e7eb));
  overflow: hidden;
}

.nm-crm-analysis-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--nm-primary, var(--color-primary, #7c5cfc));
  transition: width 300ms ease;
}

.nm-crm-analysis-view[aria-busy="true"] {
  opacity: 0.85;
}

.nm-crm-analysis-view {
  min-width: 0;
}

.nm-crm-analysis-empty {
  margin: 0;
}

.nm-crm-analysis-empty .nm-crm-detail-empty-text {
  margin: 0;
}

.nm-crm-analysis-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--crm-detail-text, var(--text-color, #1f2937));
  white-space: normal;
  word-break: break-word;
}

.nm-crm-analysis-body br {
  display: block;
  content: "";
  margin-top: 0.35em;
}

.nm-crm-analysis-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.nm-crm-analysis-list li {
  margin: 0 0 0.65em;
  padding-left: 0.15rem;
}

.nm-crm-analysis-list li:last-child {
  margin-bottom: 0;
}

.nm-crm-analysis-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .nm-crm-analysis-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .nm-crm-analysis-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nm-crm-analysis-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .nm-crm-analysis-toolbar .nm-btn {
    align-self: flex-start;
  }

  .analysis-seo-table-wrap--desktop {
    display: none;
  }

  .analysis-seo-cards-wrap--mobile {
    display: block;
  }

  .analysis-perf-score-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .analysis-lab-table__value {
    font-size: 0.8125rem;
  }

  .nm-crm-analysis-detail-body {
    max-height: min(75vh, 640px);
  }
}

@media (max-width: 420px) {
  .nm-crm-analysis-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

.nm-crm-detail-note-card,
.nm-crm-detail-row-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  border: 1px solid var(--crm-detail-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--crm-detail-surface);
}

@media (max-width: 960px) {
  .nm-crm-notes-analysis-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.nm-crm-detail-note-card__head,
.nm-crm-detail-row-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.nm-crm-detail-note-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nm-crm-detail-note-card__author strong {
  font-size: 0.875rem;
}

.nm-crm-detail-note-card__date {
  font-size: 0.75rem;
  color: var(--crm-detail-muted);
}

.nm-crm-detail-note-card__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--crm-detail-text);
  white-space: pre-wrap;
}

.nm-crm-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--crm-detail-border);
  border-radius: 12px;
}

.nm-crm-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.nm-crm-detail-table th,
.nm-crm-detail-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--crm-detail-border);
  vertical-align: middle;
}

.nm-crm-detail-table th {
  background: var(--crm-detail-hover);
  color: var(--crm-detail-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.nm-crm-detail-table tr:last-child td {
  border-bottom: 0;
}

.nm-crm-detail-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 24px;
  border: 1.5px dashed var(--crm-detail-border);
  border-radius: 12px;
  background: var(--crm-detail-hover);
  color: var(--crm-detail-muted);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.nm-crm-detail-dropzone:hover,
.nm-crm-detail-dropzone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--crm-detail-surface));
}

.nm-crm-detail-dropzone svg {
  width: 28px;
  height: 28px;
}

.nm-crm-detail-dropzone p {
  margin: 0;
  font-size: 0.875rem;
}

/* Drawers: eine globale Definition im CRM-Overview-Block (weiter oben) */

.nm-crm-detail-page .nm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--crm-detail-border);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--crm-detail-surface);
  color: var(--crm-detail-muted);
  cursor: pointer;
}

.nm-crm-detail-page .nm-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* —— Responsive —— */
@media (max-width: 1399px) {
  .nm-crm-activity-layout,
  .nm-crm-activity-overview {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  }

  .nm-crm-interaction-card {
    grid-column: 1;
  }
  .nm-crm-followup-card,
  .nm-crm-detail-followup-card {
    grid-column: 2;
  }
  .nm-crm-statistics-card,
  .nm-crm-detail-stats-card {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .nm-crm-timeline-card,
  .nm-crm-activity-timeline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1279px) {
  .nm-crm-detail-layout {
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .nm-crm-detail-page {
    padding: 18px 16px 36px;
  }

  .nm-crm-detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nm-crm-activity-layout,
  .nm-crm-activity-overview {
    grid-template-columns: 1fr;
  }

  .nm-crm-interaction-card,
  .nm-crm-followup-card,
  .nm-crm-detail-followup-card,
  .nm-crm-statistics-card,
  .nm-crm-detail-stats-card,
  .nm-crm-timeline-card,
  .nm-crm-activity-timeline {
    grid-column: auto;
    min-width: 0;
  }

  .nm-crm-detail-tabs {
    flex-wrap: wrap;
  }

  .nm-crm-detail-tab.tablinks,
  .nm-crm-detail-tab {
    flex: 1 1 calc(33.333% - 0.01px);
    min-width: 6.75rem;
  }

  .nm-crm-detail-dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .nm-crm-timeline-item {
    grid-template-columns: 24px 36px minmax(0, 1fr) auto;
  }

  .nm-crm-detail-timeline::before {
    left: 11px;
  }

  .nm-drawer__panel--xl {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 640px) {
  .nm-crm-detail-title {
    font-size: 1.25rem;
  }

  .nm-crm-detail-meta {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .nm-crm-detail-meta-chip {
    flex-shrink: 0;
  }

  .nm-crm-detail-actions {
    width: 100%;
  }

  .nm-crm-detail-actions .nm-btn,
  .nm-crm-detail-page .nm-crm-more-toggle {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Clients Overview (nm-clients-page)
   ========================================================================== */

section.nm-clients-page,
.nm-clients-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
}

/* display:grid/flex auf Containern überschreibt sonst das UA-[hidden] */
.nm-clients-page [hidden] {
  display: none !important;
}

.nm-clients-page .nm-page-header {
  margin-bottom: 0;
  width: 100%;
}

.nm-clients-toolbar,
.nm-clients-grid,
.nm-clients-table-card,
.nm-clients-pagination,
.nm-clients-chips,
.nm-clients-empty {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.nm-clients-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--client-card-bg);
  border: 1px solid var(--client-card-border);
  box-shadow: var(--client-card-shadow);
}

.nm-clients-toolbar__start,
.nm-clients-toolbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.nm-clients-page label.nm-clients-search {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  box-sizing: border-box;
  font-size: 0.9rem;
  font-weight: 400;
}

.nm-clients-search__icon {
  display: inline-flex;
  color: var(--client-card-muted);
  line-height: 0;
  flex-shrink: 0;
}

.nm-clients-page .nm-clients-search input.nm-clients-search__input,
.nm-clients-page .nm-clients-search input.nm-clients-search__input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--client-card-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.nm-clients-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--nm-radius-md, 8px);
  color: #fff;
}

.nm-clients-add-btn .nm-icon,
.nm-clients-add-btn svg,
.nm-clients-toolbar-btn .nm-icon,
.nm-clients-toolbar-btn svg,
.nm-clients-view-btn .nm-icon,
.nm-clients-view-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

.nm-clients-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
}

.nm-clients-view-btn,
.nm-clients-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--client-card-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
}

.nm-clients-toolbar-btn {
  height: 42px;
  border: 1px solid var(--client-card-border);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--client-card-bg);
  color: var(--client-card-text);
}

.nm-clients-view-btn.is-active,
.nm-clients-view-btn[aria-pressed="true"] {
  background: rgba(252, 79, 79, 0.1);
  color: var(--nm-brand);
}

.nm-clients-view-btn:focus-visible,
.nm-clients-toolbar-btn:focus-visible,
.nm-clients-profile-btn:focus-visible,
.nm-clients-more__toggle:focus-visible {
  outline: 2px solid var(--nm-focus-ring);
  outline-offset: 2px;
}

.nm-clients-dropdown {
  position: relative;
}

.nm-clients-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  box-shadow: var(--nm-shadow-md);
}

.nm-clients-dropdown__menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--client-card-text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.nm-clients-dropdown__menu button:hover {
  background: var(--client-table-hover);
}

.nm-clients-filter-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
  padding: 10px;
}

.nm-clients-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nm-clients-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 32px;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--client-card-border) !important;
  border-radius: var(--nm-radius-pill, 999px) !important;
  background: var(--client-card-bg) !important;
  color: var(--client-card-text) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  white-space: nowrap;
}

.nm-clients-filter-pill:hover {
  background: var(--client-table-hover) !important;
  border-color: rgba(252, 79, 79, 0.28) !important;
}

.nm-clients-filter-pill.is-active,
.nm-clients-filter-pill[aria-pressed="true"] {
  background: rgba(252, 79, 79, 0.1) !important;
  border-color: var(--nm-brand) !important;
  color: var(--nm-brand) !important;
}

.nm-clients-filter-reset {
  margin-top: 2px;
  width: 100%;
  border-top: 1px solid var(--client-card-border) !important;
  border-radius: 0 0 6px 6px !important;
  color: var(--nm-brand) !important;
  justify-content: center;
}

.nm-clients-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nm-clients-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  color: var(--client-card-text);
  font-size: 0.8rem;
  cursor: pointer;
}

.nm-clients-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.nm-clients-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 210px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  box-shadow: var(--client-card-shadow);
  color: var(--client-card-text);
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-clients-card:hover {
  border-color: rgba(252, 79, 79, 0.22);
}

.nm-clients-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nm-clients-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nm-clients-card__titles {
  min-width: 0;
}

.nm-clients-card__company {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--client-card-text);
}

.nm-clients-card__person {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--client-card-muted);
}

.nm-clients-card__top-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nm-clients-profile-btn,
.nm-clients-more__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--nm-radius-pill, 999px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  color: var(--client-card-muted);
  cursor: pointer;
  text-decoration: none;
}

.nm-clients-profile-btn:hover,
.nm-clients-more__toggle:hover {
  color: var(--client-card-text);
  border-color: rgba(252, 79, 79, 0.28);
}

.nm-clients-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--nm-radius-pill, 999px);
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--client-card-border);
}

.nm-clients-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 0;
}

.nm-clients-avatar--c0 {
  background: var(--client-avatar-0-bg);
  color: var(--client-avatar-0-text);
}
.nm-clients-avatar--c1 {
  background: var(--client-avatar-1-bg);
  color: var(--client-avatar-1-text);
}
.nm-clients-avatar--c2 {
  background: var(--client-avatar-2-bg);
  color: var(--client-avatar-2-text);
}
.nm-clients-avatar--c3 {
  background: var(--client-avatar-3-bg);
  color: var(--client-avatar-3-text);
}
.nm-clients-avatar--c4 {
  background: var(--client-avatar-4-bg);
  color: var(--client-avatar-4-text);
}
.nm-clients-avatar--c5 {
  background: var(--client-avatar-5-bg);
  color: var(--client-avatar-5-text);
}

.nm-clients-card__contacts,
.nm-clients-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nm-clients-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--client-card-muted);
  text-decoration: none;
  font-size: 0.86rem;
}

.nm-clients-contact-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-clients-contact-line .nm-icon,
.nm-clients-contact-line svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nm-clients-contact-line:hover {
  color: var(--nm-brand);
}

.nm-clients-card__footer {
  margin-top: auto;
  padding-top: 4px;
}

.nm-contract-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--nm-radius-md, 8px);
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1.25;
}

.nm-contract-badge__sub {
  font-size: 0.72rem;
  font-weight: 450;
  opacity: 0.9;
}

.nm-contract-badge--none {
  background: var(--contract-none-bg);
  color: var(--contract-none-text);
}
.nm-contract-badge--active {
  background: var(--contract-active-bg);
  color: var(--contract-active-text);
}
.nm-contract-badge--expiring {
  background: var(--contract-expiring-bg);
  color: var(--contract-expiring-text);
}
.nm-contract-badge--expired {
  background: var(--contract-expired-bg);
  color: var(--contract-expired-text);
}

.nm-clients-table-card {
  width: 100%;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--client-table-border);
  background: var(--client-table-bg);
  box-shadow: var(--client-card-shadow);
  overflow: hidden;
}

.nm-clients-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.nm-clients-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--client-table-text);
}

.nm-clients-table th {
  padding: 12px 16px;
  background: var(--client-table-header-bg);
  color: var(--client-table-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--client-table-border);
  white-space: nowrap;
}

.nm-clients-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--client-table-border);
  vertical-align: middle;
  font-size: 0.9rem;
  height: 60px;
  overflow: hidden;
}

.nm-clients-table th:nth-child(1),
.nm-clients-table td:nth-child(1) {
  width: 22%;
}
.nm-clients-table th:nth-child(2),
.nm-clients-table td:nth-child(2) {
  width: 14%;
}
.nm-clients-table th:nth-child(3),
.nm-clients-table td:nth-child(3) {
  width: 24%;
}
.nm-clients-table th:nth-child(4),
.nm-clients-table td:nth-child(4) {
  width: 18%;
}
.nm-clients-table th:nth-child(5),
.nm-clients-table td:nth-child(5) {
  width: 8%;
}
.nm-clients-table th:nth-child(6),
.nm-clients-table td:nth-child(6) {
  width: 8%;
}
.nm-clients-table th:nth-child(7),
.nm-clients-table td:nth-child(7) {
  width: 6%;
}

.nm-clients-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.nm-clients-row:hover {
  background: var(--client-table-hover);
}

.nm-clients-company-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nm-clients-company-cell .nm-clients-avatar {
  width: 36px;
  height: 36px;
}

.nm-clients-company-cell__name {
  font-weight: 600;
}

.nm-clients-muted {
  color: var(--client-table-muted);
}

.nm-clients-actions {
  display: flex;
  justify-content: flex-end;
}

.nm-clients-more {
  position: relative;
}

.nm-clients-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  box-shadow: var(--nm-shadow-md);
}

.nm-clients-more__menu a,
.nm-clients-more__menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--client-card-text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nm-clients-more__menu a:hover,
.nm-clients-more__menu button:hover {
  background: var(--client-table-hover);
}

.nm-clients-more__menu .is-danger {
  margin-top: 4px;
  border-top: 1px solid var(--client-card-border);
  border-radius: 0 0 6px 6px;
  color: var(--nm-danger, #d92d20);
}

.nm-clients-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.nm-clients-pagination__info {
  color: var(--client-card-muted);
  font-size: 0.88rem;
}

.nm-clients-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nm-clients-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--client-card-border);
  background: var(--client-card-bg);
  color: var(--client-card-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
}

.nm-clients-page-btn.is-active {
  border-color: var(--nm-brand);
  color: var(--nm-brand);
  background: rgba(252, 79, 79, 0.08);
}

.nm-clients-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nm-clients-page-ellipsis {
  padding: 0 4px;
  color: var(--client-card-muted);
}

.nm-clients-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  width: 100%;
}

.nm-clients-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.nm-clients-switch__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--client-card-text, var(--text-color, #1f2937));
  line-height: 1.3;
}

.nm-clients-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-clients-switch__ui {
  width: 42px;
  height: 24px;
  border-radius: var(--nm-radius-pill, 999px);
  background: #d0d5dd;
  position: relative;
  display: block;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.nm-clients-switch__ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--nm-radius-pill, 999px);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
  transition: transform 0.15s ease;
}

.nm-clients-switch input:checked + .nm-clients-switch__ui {
  background: var(--nm-brand);
}

.nm-clients-switch input:checked + .nm-clients-switch__ui::after {
  transform: translateX(18px);
}

.nm-clients-switch input:focus-visible + .nm-clients-switch__ui {
  outline: 2px solid var(--nm-brand);
  outline-offset: 2px;
}

.nm-clients-form-error {
  color: var(--nm-danger, #d92d20);
  font-size: 0.88rem;
  margin: 0.5rem 0;
}

.nm-clients-contract-modal.modal-content {
  align-items: stretch;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 2rem 1.75rem 1.5rem;
  width: min(440px, calc(100vw - 2rem));
  max-width: 440px;
}

.nm-clients-contract-modal__header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  padding-right: 1.75rem;
}

.nm-clients-contract-modal__header h4 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
}

.nm-clients-contract-modal__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--client-card-muted, #667085);
}

.nm-clients-contract-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.nm-clients-contract-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--client-card-border, rgba(16, 24, 40, 0.1));
  border-radius: var(--nm-radius-md, 12px);
  background: var(--client-card-bg, rgba(249, 250, 251, 0.85));
}

.nm-clients-contract-date-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.nm-clients-contract-modal .nm-clients-contract-date-field {
  width: 100%;
  flex: none;
  gap: 0.4rem;
}

.nm-clients-contract-modal .nm-clients-contract-date-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--client-card-muted, #667085);
}

.nm-clients-contract-modal .nm-clients-contract-date-field input[type="date"] {
  width: 100%;
  min-height: 2.6rem;
  border-radius: var(--nm-radius-md, 10px);
}

.nm-clients-contract-modal .form-field input[type="date"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nm-clients-contract-extend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nm-clients-contract-extend__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--client-card-muted, #667085);
}

.nm-clients-contract-extend__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.nm-clients-contract-extend__btn {
  appearance: none;
  border: 1px solid var(--client-card-border, rgba(16, 24, 40, 0.12));
  background: var(--white, #fff);
  color: var(--client-card-text, #1f2937);
  border-radius: var(--nm-radius-md, 10px);
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-clients-contract-extend__btn:hover:not(:disabled) {
  border-color: var(--nm-brand);
  color: var(--nm-brand);
  background: rgba(252, 79, 79, 0.06);
}

.nm-clients-contract-extend__btn:focus-visible {
  outline: 2px solid var(--nm-brand);
  outline-offset: 2px;
}

.nm-clients-contract-extend__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nm-clients-contract-modal__actions {
  width: 100%;
  margin-top: 0.25rem;
}

html[data-theme="dark"] .nm-clients-contract-panel {
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .nm-clients-contract-extend__btn {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .nm-clients-switch__ui {
  background: #475467;
}

.avatar-img-ctn .client-logo {
  width: 100%;
  max-width: 200px;
  max-height: 100px;
  object-fit: contain;
}

.avatar-img-ctn .client-logo-fallback {
  width: 100px;
}

@media (max-width: 1200px) {
  .nm-clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .nm-clients-page {
    padding: 20px 16px 28px;
  }

  .nm-clients-grid {
    grid-template-columns: 1fr;
  }

  .nm-clients-search {
    width: 100%;
  }

  .nm-clients-toolbar__start,
  .nm-clients-toolbar__end {
    width: 100%;
  }

  .nm-clients-table th:nth-child(5),
  .nm-clients-table td:nth-child(5),
  .nm-clients-table th:nth-child(6),
  .nm-clients-table td:nth-child(6) {
    display: none;
  }
}

/* ==========================================================================
   Customer Detail (nm-customer-detail-page)
   ========================================================================== */

section.nm-customer-detail-page,
.nm-customer-detail-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
}

.nm-customer-detail-page [hidden] {
  display: none !important;
}

.nm-customer-detail-page .nm-page-header {
  margin-bottom: 0;
  width: 100%;
}

.nm-cd-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  border-radius: var(--nm-radius-md, 8px);
}

.nm-cd-header-btn .nm-icon,
.nm-cd-header-btn svg {
  width: 16px;
  height: 16px;
}

.nm-cd-more {
  position: relative;
}

.nm-cd-more__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--customer-detail-card-border);
  background: var(--customer-detail-card-bg);
  color: var(--customer-detail-muted);
  cursor: pointer;
}

.nm-cd-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--customer-detail-card-border);
  background: var(--customer-detail-card-bg);
  box-shadow: var(--nm-shadow-md);
}

.nm-cd-more__menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--customer-detail-text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.nm-cd-more__menu button:hover {
  background: rgba(152, 162, 179, 0.12);
}

.nm-cd-more__menu .is-danger {
  margin-top: 4px;
  border-top: 1px solid var(--customer-detail-card-border);
  color: var(--nm-danger, #d92d20);
}

.nm-cd-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1.15fr) minmax(
      360px,
      1.35fr
    );
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.nm-cd-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--customer-detail-card-border);
  background: var(--customer-detail-card-bg);
  border-radius: var(--nm-radius-xl, 14px);
  box-shadow: var(--customer-detail-shadow);
  color: var(--customer-detail-text);
  box-sizing: border-box;
  min-width: 0;
}

.nm-cd-card--profile {
  grid-row: span 2;
}

.nm-cd-card--invoices {
  width: 100%;
}

.nm-cd-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nm-cd-card-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--customer-detail-text);
}

/* Globales `svg { stroke: var(--accent) }` überschreiben — Prototyp: blaue Header-Icons */
.nm-customer-detail-page .nm-cd-card-header h3 .nm-icon,
.nm-customer-detail-page .nm-cd-card-header h3 svg {
  width: 18px;
  height: 18px;
  color: #3b82f6 !important;
  stroke: #3b82f6 !important;
  fill: none !important;
}

html[data-theme="dark"] .nm-customer-detail-page .nm-cd-card-header h3 .nm-icon,
html[data-theme="dark"] .nm-customer-detail-page .nm-cd-card-header h3 svg {
  color: #60a5fa !important;
  stroke: #60a5fa !important;
}

.nm-cd-card-footer {
  margin-top: auto;
  padding-top: 4px;
}

.nm-cd-card-footer--actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nm-cd-card-footer--center {
  display: flex;
  justify-content: center;
}

.nm-cd-btn-block {
  width: 100%;
  justify-content: center;
}

.nm-customer-detail-page .nm-cd-btn-block.nm-btn--secondary .nm-icon,
.nm-customer-detail-page .nm-cd-btn-block.nm-btn--secondary svg,
.nm-customer-detail-page #manageContractBtn .nm-icon,
.nm-customer-detail-page #manageContractBtn svg {
  color: var(--customer-detail-muted);
  stroke: currentColor;
  fill: none;
  width: 16px;
  height: 16px;
}

.nm-cd-btn-danger {
  color: var(--nm-danger, #d92d20);
  border-color: rgba(217, 45, 32, 0.25);
}

.nm-cd-profile-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.nm-cd-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--nm-radius-xl, 14px);
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--customer-detail-card-border);
  background: #fff;
}

.nm-cd-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  border: 0;
}

.nm-cd-profile-company {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.nm-cd-profile-contacts,
.nm-cd-contact-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--customer-detail-muted);
  font-size: 0.9rem;
}

.nm-cd-contact-line a {
  color: var(--nm-brand);
  text-decoration: none;
}

.nm-cd-dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.nm-cd-dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--customer-detail-card-border);
}

.nm-cd-dl dt {
  margin: 0;
  color: var(--customer-detail-muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.nm-cd-dl dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 560;
  min-width: 0;
  overflow-wrap: anywhere;
}

.nm-cd-dl dd a {
  color: var(--nm-brand);
  text-decoration: none;
}

.nm-cd-contract-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
}

.nm-cd-contract-status__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--nm-radius-md, 10px);
  background: rgba(255, 255, 255, 0.7);
}

.nm-cd-contract-status__icon .nm-icon,
.nm-cd-contract-status__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor !important;
  fill: none;
}

.nm-cd-contract-status__icon .nm-icon--filled,
.nm-cd-contract-status__icon svg.nm-icon--filled {
  fill: currentColor !important;
  stroke: none !important;
  color: inherit;
}

.nm-cd-contract-status__icon .nm-icon--filled path[fill="currentColor"],
.nm-cd-contract-status__icon svg.nm-icon--filled > path:first-child {
  fill: currentColor !important;
  stroke: none !important;
}

.nm-cd-contract-status__icon .nm-icon--filled path[data-check],
.nm-cd-contract-status__icon svg.nm-icon--filled path[data-check] {
  fill: #ffffff !important;
  stroke: none !important;
}

.nm-cd-contract-status__text {
  min-width: 0;
  flex: 1 1 auto;
}

.nm-cd-contract-status strong {
  display: block;
  margin-bottom: 0.25rem;
}

.nm-cd-contract-status p {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.9;
}

.nm-cd-contract-status--none {
  background: var(--contract-none-bg);
  color: var(--contract-none-text);
}
.nm-cd-contract-status--none .nm-cd-contract-status__icon {
  background: rgba(102, 112, 133, 0.12);
  color: var(--contract-none-text);
}
.nm-cd-contract-status--active {
  background: var(--contract-active-bg);
  color: var(--contract-active-text);
}
.nm-cd-contract-status--active .nm-cd-contract-status__icon {
  background: rgba(22, 138, 75, 0.18);
  color: var(--contract-active-text);
}
.nm-cd-contract-status--expiring {
  background: var(--contract-expiring-bg);
  color: var(--contract-expiring-text);
}
.nm-cd-contract-status--expiring .nm-cd-contract-status__icon {
  background: rgba(183, 121, 31, 0.14);
  color: var(--contract-expiring-text);
}
.nm-cd-contract-status--expired {
  background: var(--contract-expired-bg);
  color: var(--contract-expired-text);
}
.nm-cd-contract-status--expired .nm-cd-contract-status__icon {
  background: rgba(217, 45, 32, 0.12);
  color: var(--contract-expired-text);
}

.nm-cd-contract-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 8px;
}

.nm-cd-contract-meta > span {
  color: var(--customer-detail-muted);
  font-size: 0.8rem;
}

.nm-cd-contract-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--customer-detail-text);
  font-weight: 650;
}

.nm-cd-contract-meta__date .nm-icon,
.nm-cd-contract-meta__date svg {
  width: 16px;
  height: 16px;
  color: var(--customer-detail-muted);
  stroke: currentColor;
  fill: none;
}

.nm-cd-note-body {
  box-sizing: border-box;
  height: 240px;
  min-height: 140px;
  max-height: 70vh;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--customer-detail-note-bg);
  border: 1px solid var(--customer-detail-note-border);
  overflow-x: hidden;
  overflow-y: auto;
  resize: vertical;
  overscroll-behavior: contain;
}

.nm-cd-card--notes .nm-cd-card-footer {
  display: flex;
  justify-content: flex-start;
}

.nm-cd-note-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--customer-detail-text);
}

.nm-cd-empty-text {
  margin: 0;
  color: var(--customer-detail-muted);
  font-size: 0.92rem;
}

.nm-cd-count-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--nm-radius-pill, 999px);
  background: rgba(152, 162, 179, 0.14);
  color: var(--customer-detail-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.nm-cd-website-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--customer-detail-card-border);
}

.nm-cd-website-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nm-cd-website-favicon {
  width: 28px;
  height: 28px;
  border-radius: var(--nm-radius-md, 8px);
  object-fit: contain;
}

.nm-cd-website-favicon--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(152, 162, 179, 0.12);
  color: var(--customer-detail-muted);
}

.nm-cd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--customer-detail-card-border);
  background: var(--customer-detail-card-bg);
  color: var(--customer-detail-muted);
  cursor: pointer;
  text-decoration: none;
}

.nm-cd-icon-btn:hover {
  color: var(--customer-detail-text);
  border-color: rgba(252, 79, 79, 0.28);
}

.nm-cd-icon-btn .nm-icon,
.nm-cd-icon-btn svg {
  width: 16px;
  height: 16px;
}

.nm-cd-text-link {
  border: 0;
  background: transparent;
  color: var(--nm-brand);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 560;
  cursor: pointer;
}

.nm-cd-credentials-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--client-table-border);
  background: var(--client-table-bg);
}

.nm-cd-credentials-table {
  width: 100%;
  min-width: 420px;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--client-table-text);
}

.nm-cd-credentials-table th {
  padding: 12px 16px;
  background: var(--client-table-header-bg);
  color: var(--client-table-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--client-table-border);
  white-space: nowrap;
}

.nm-cd-credentials-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--client-table-border);
  vertical-align: middle;
  font-size: 0.9rem;
  height: 56px;
  overflow: hidden;
}

.nm-cd-credentials-table tbody tr:last-child td {
  border-bottom: 0;
}

.nm-cd-credentials-table tbody tr:hover td {
  background: var(--client-table-hover);
}

.nm-cd-credentials-table th:nth-child(1),
.nm-cd-credentials-table td:nth-child(1) {
  width: 28%;
}
.nm-cd-credentials-table th:nth-child(2),
.nm-cd-credentials-table td:nth-child(2) {
  width: 24%;
}
.nm-cd-credentials-table th:nth-child(3),
.nm-cd-credentials-table td:nth-child(3) {
  width: 26%;
}
.nm-cd-credentials-table th:nth-child(4),
.nm-cd-credentials-table td:nth-child(4) {
  width: 22%;
}

.nm-cd-cred-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nm-cd-cred-actions .pw-hidden {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--customer-detail-muted);
  margin-right: 4px;
}

.nm-cd-header-mini {
  height: 34px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.nm-cd-invoice-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 12px;
}

.nm-cd-invoice-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(152, 162, 179, 0.12);
  color: var(--customer-detail-muted);
}

.nm-cd-invoice-empty__icon .nm-icon,
.nm-cd-invoice-empty__icon svg {
  width: 24px;
  height: 24px;
  color: var(--customer-detail-muted);
  stroke: currentColor !important;
  fill: none !important;
}

.nm-cd-invoice-empty h4 {
  margin: 0;
  font-size: 1rem;
}

.nm-cd-invoice-empty p {
  margin: 0;
  color: var(--customer-detail-muted);
  max-width: 420px;
}

.nm-cd-empty-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

@media (max-width: 1100px) {
  .nm-cd-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nm-cd-card--profile {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .nm-cd-note-body {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .nm-customer-detail-page {
    padding: 20px 16px 28px;
  }
  .nm-cd-grid {
    grid-template-columns: 1fr;
  }
  .nm-page-header__actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .nm-cd-header-btn {
    flex: 1 1 auto;
  }
  .nm-cd-card-footer--actions .nm-btn {
    flex: 1 1 auto;
  }
  .nm-cd-note-body {
    height: 160px;
    min-height: 120px;
    max-height: 60vh;
  }
}

/* -----------------------------

 Stile Multi-Step Formular
            
---------------------------------*/

.stepper-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.step-item {
  display: flex;
  align-items: center;
  position: relative;
}

.circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: background-color 0.3s;
}

.step-item.completed .circle,
.step-item.active .circle {
  background-color: var(--accent);
  box-shadow: var(--shadow);
}

.line {
  position: relative;
  height: 4px;
  width: 70px;
  background-color: #ccc;
  margin: 0 10px;
  overflow: hidden;
  border-radius: 2px;
}

.line .fill {
  position: absolute;
  height: 100%;
  width: 0;
  background-color: var(--accent);
  left: 0;
  top: 0;
  transition: width 0.5s ease;
}

.step-item.completed .line .fill {
  width: 100%;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

/* -----------------------------

 Stile Icon Listen, Listen usw.
            
---------------------------------*/

.bullet-point {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullet-point svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  fill: var(--accent);
}

.icon-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.icon-list li {
  display: flex;
  gap: 0.3rem;
  text-align: left;
}

.icon-list li span {
  font-weight: 500;
}

.icon-list li svg {
  fill: var(--accent);
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

/* -----------------------------

        Stile Webmaster Dashboard

---------------------------------*/

.link-box-ctn {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.link-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  width: calc(25% - 1.5rem);
  flex: 0 0 auto;
  background: white;
  border-radius: var(--light-radius);
  padding: 2rem 1rem;
  box-shadow: var(--shadow);
  border: 1px solid white;
  transition: all 0.3s ease;
  cursor: pointer;
}

.link-box:hover {
  border: 1px solid var(--dark-bg);
}

.link-box-ctn .flex50 {
  width: calc(50% - 1.5rem);
}

.link-box-ctn .row {
  flex-direction: row;
}

.link-box-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.link-box-heading h4 {
  z-index: 2;
  margin-left: 3rem;
}

.link-box-heading span {
  position: absolute;
  font-size: 6rem;
  font-weight: 900;
  left: -30px;
  top: -20px;
}

.link-box-heading img {
  height: 200px;
  width: 200px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow: var(--shadow);
}

.link-box-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.link-box-icon h4 {
  font-size: 1.3rem;
}

.link-box-icon svg {
  height: 30px;
  width: 30px;
  display: block;
  fill: var(--accent);
}

.link-box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 1230px) {
  .link-box-icon {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 0;
  }

  .link-box-icon svg {
    height: 80px;
    width: 80px;
  }

  .link-box-icon h4 {
    font-size: 1.2rem;
  }
}

@media (max-width: 1200px) {
  .link-box-heading h4 {
    z-index: 2;
    margin-left: 2rem;
  }

  .link-box-heading span {
    font-size: 5rem;
  }

  .link-box-heading img {
    height: 130px;
    width: 130px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: var(--shadow);
  }
}

@media (max-width: 991px) {
  .link-box {
    width: calc(50% - 1rem);
  }

  .link-box-ctn .flex50 {
    width: calc(50% - 1rem);
  }

  .link-box-heading span {
    font-size: 4rem;
  }

  .link-box-ctn .row {
    flex-direction: column;
  }

  .link-box-heading h4 {
    font-size: 1.3rem;
  }

  .link-box-icon {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    gap: 1rem;
  }
}

@media (max-width: 576px) {
  .link-box-heading h4 {
    margin-left: 0;
  }

  .link-box {
    width: 100%;
  }

  .link-box-ctn .flex50 {
    width: calc(100%);
  }

  .link-box-heading span {
    font-size: 2rem;
    position: static;
  }
}

/* ---------------   Stile Dokumentation  --------------------*/

.step-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.code-box {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
}

.step-box ul {
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
  gap: 1rem;
}

.step-box ul li {
  list-style-type: disc;
  padding-left: 1rem;
}

/* -----------------------------

        Stile PopUp Builder

---------------------------------*/
#popupEditForm .form-field,
#popupBuilderForm .form-field {
  width: 100%;
}

#popupEditForm label,
#popupBuilderForm label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--dark-bg);
  padding: 1rem 0;
}

#popupEditForm {
  height: 100%;
}

#popupEditModal .modal-content {
  max-height: calc(100vh - 2rem);
  height: auto;
}

/* -----------------------------

            Stile Startseite

---------------------------------*/

.help-button {
  position: absolute;
}

.help-button svg {
  background-color: var(--light-bg);
  fill: var(--accent);
  border-radius: 50%;
}

.overview {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  align-content: start;
}

.overview-page-header {
  grid-column: 1 / -1;
}

.overview-page-header .nm-page-header {
  margin-bottom: 0;
}

/* overview-welcome* entfernt 2026-07-23 (ersetzt durch nm-dash-hero) */

.overview-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.overview-ops {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.overview-secondary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  opacity: 0.92;
}

.overview-metric-card,
.nm-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--nm-surface-raised, var(--surface-card));
  border: 1px solid var(--nm-border, var(--border-subtle));
  border-radius: var(--nm-radius-lg, var(--light-radius));
  box-shadow: var(--nm-shadow-sm, var(--shadow-sm));
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.overview-metric-card:hover,
.nm-stat-card:hover {
  box-shadow: var(--nm-shadow-md, var(--shadow-md));
  border-color: rgba(252, 79, 79, 0.35);
  transform: translateY(-1px);
}

.overview-metric-card .metric-label,
.nm-stat-card .metric-label {
  font-size: 0.8rem;
  color: var(--nm-text-muted, var(--text-muted));
  font-weight: 500;
}

.overview-metric-card .metric-value,
.nm-stat-card .metric-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.2;
}

.overview-metric-card .metric-hint,
.nm-stat-card .metric-hint {
  font-size: 0.8rem;
  color: var(--nm-text-muted, var(--text-muted));
}

.overview-quick-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 1280px) {
  .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .overview-metrics,
  .overview-ops,
  .overview-secondary {
    grid-template-columns: 1fr;
  }
}

.overview-box {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--nm-radius-lg, var(--light-radius));
  box-shadow: var(--nm-shadow-sm, var(--shadow-sm));
  border: 1px solid var(--nm-border, var(--border-subtle));
  padding: 0;
  gap: 0;
  background-color: var(--nm-surface-raised, var(--surface-card));
  min-width: 0;
  color: var(--nm-text, var(--dark-text));
}

.overview-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
  overflow: visible;
  height: auto;
  min-height: 0;
}

.overview-subheading {
  display: flex;
  padding: 0.5rem 1rem;
  background-color: var(--nm-surface-chrome, var(--dark-bg));
  border-top-left-radius: var(--nm-radius-lg, var(--light-radius));
  border-top-right-radius: var(--nm-radius-lg, var(--light-radius));
  justify-content: space-between;
  align-items: center;
}

.overview-subheading h4 {
  font-size: 1rem;
  color: var(--nm-text-inverse, var(--light-text));
  padding-left: 25px;
}

.overview-subheading svg {
  stroke: var(--nm-text-inverse, var(--light-text));
}

.overview-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--nm-border, var(--dark-bg));
  background-color: var(--nm-surface-sunken, var(--light-bg));
  z-index: 2;
  height: 100px;
}
.overview-icon-row,
.overview-tabs {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.overview-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  box-sizing: border-box;
  border-left: 1px solid var(--light-bg);
  border-right: 1px solid var(--light-bg);
}

.overview-tabs .is-active {
  background-color: white;
}

.overview-box::after {
  background: none;
}

.news::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    #ffffff00 0%,
    rgba(255, 255, 255, 0.071) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.overview-heading h3 {
  font-size: 1.3rem;
  width: 100%;
}

.overview-content {
  display: flex;
  padding: 1rem;
}

.overview table {
  min-width: unset;
}

.overview-table table tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.offline-table {
  min-width: unset;
}

.offline-table td,
th {
  height: 40px;
  padding: 0;
}

#tasksOverview tr td {
  font-size: 0.8rem;
}

#tasksOverview td,
#tasksOverview th {
  height: 50px;
}

#theme-update-overview,
#plugin-update-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#themes-update-counter,
#plugin-update-counter,
#core-update-counter {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  border-radius: 100%;
  width: 16px;
  height: 16px;
  margin: 2px;
  padding: 1px;
}

.count {
  color: var(--light-text);
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
}

.overview-footer {
  display: flex;
  padding: 1rem;
  height: 60px;
  gap: 1rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--dark-bg);
}

.overview-footer label {
  display: flex;
}

.overview-icon-box-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100px;
}

.overview-icon-box-heading h6 {
  font-size: 1rem;
}

.news .overview-content {
  justify-content: center;
}

.news .overview-heading {
  background-color: var(--dark-bg);
  border-top-left-radius: var(--light-radius);
  border-top-right-radius: var(--light-radius);
  height: 60px;
}

.news .overview-heading h4 {
  color: var(--light-text);
  font-size: 1.2rem;
}

.overview-news-ctn {
  display: flex;
  gap: 1rem;
}

.overview-news-thumbnail {
  display: flex;
  flex: 1;
}

.overview-news-thumbnail img {
  width: 100%;
  max-width: 180px;
  object-fit: cover;
}

.overview-news-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.overview-faq ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.overview-faq ul li {
  display: flex;
  align-items: center;
}

.overview-faq ul li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.overview-faq ul li a {
  display: flex;
  text-decoration: underline;
  font-size: 0.9rem;
  gap: 0.3rem;
}

/* workingtime-circle* entfernt 2026-07-23 (keine Markup-/JS-Referenz) */

@media (max-width: 1280px) {
  .overview {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Status Badges (Legacy → nm-badge Aliase) */
.badge,
.badge-success,
.badge-warning,
.badge-danger,
.badge-info,
.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success,
.nm-badge.badge-success {
  background: rgba(47, 158, 68, 0.12);
  color: var(--success);
}

.badge-warning,
.nm-badge.badge-warning {
  background: rgba(245, 159, 0, 0.15);
  color: #b36b00;
}

.badge-danger,
.nm-badge.badge-danger {
  background: rgba(252, 79, 79, 0.12);
  color: var(--danger);
}

.badge-info,
.nm-badge.badge-info {
  background: rgba(34, 139, 230, 0.12);
  color: var(--info);
}

.badge-neutral,
.nm-badge.badge-neutral {
  background: rgba(51, 67, 87, 0.08);
  color: var(--text-muted);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

.empty-state p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.is-hidden {
  display: none !important;
}

.link-underline {
  text-decoration: underline;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.inline-icon {
  width: 1rem;
  height: 1rem;
  margin-top: -3px;
}

.overview-heading-compact {
  height: auto;
  min-height: 48px;
  padding: 0 var(--space-4);
}

.overview-heading-compact h4,
.overview-heading-compact h6 {
  font-size: 1rem;
  font-weight: 600;
}

/* -----------------------------

    Stile Erweiterungen Seite

---------------------------------*/

.addon-box {
  display: flex;
  width: 100%;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.addon-img {
  display: flex;
  width: 40%;
}

.addon-img img {
  width: 100%;
  max-width: 200px;
}

.addon-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 60%;
}

.addon-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.addon-pricing {
  display: flex;
  flex-direction: column;
}

.addon-pricing p {
  text-align: left;
}

.addon-modal-ctn {
  display: flex;
  gap: 1rem;
}

.addon-modal-ctn .addon-content {
  background-color: var(--light-bg);
  border-radius: var(--light-radius);
  padding: 1rem;
}

@media (max-width: 576px) {
  .addon-box {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .addon-text,
  .addon-img,
  .addon-content {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .addon-img img {
    width: 50%;
  }

  .addon-modal-ctn {
    flex-direction: column;
    width: 100%;
  }

  .addon-pricing p {
    text-align: center;
  }
}

/* ===============================
=            Choices            =
=============================== */

.choices {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  border-radius: var(--light-radius);
  border: 1px solid var(--highlighted-bg);
  height: 38px;
  background: none;
  z-index: 3;
}

.choices:focus {
  outline: none;
}

.choices:last-child {
  margin-bottom: 0;
}

.choices.is-open {
  overflow: visible;
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
}

.choices.is-disabled .choices__item {
  cursor: not-allowed;
}

.choices [hidden] {
  display: none !important;
}

.choices[data-type*="select-one"] {
  cursor: pointer;
}

.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 7.5px;
}

.choices[data-type*="select-one"] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0;
}

.choices[data-type*="select-one"] .choices__button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.25;
}

.choices[data-type*="select-one"] .choices__button:hover,
.choices[data-type*="select-one"] .choices__button:focus {
  opacity: 1;
}

.choices[data-type*="select-one"] .choices__button:focus {
  box-shadow: 0 0 0 2px #005f75;
}

.choices[data-type*="select-one"]
  .choices__item[data-placeholder]
  .choices__button {
  display: none;
}

.choices[data-type*="select-one"]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}

.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent #333;
  margin-top: -7.5px;
}

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
  cursor: text;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #003642;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 0;
}

.choices[data-type*="select-multiple"] .choices__button:hover,
.choices[data-type*="select-multiple"] .choices__button:focus,
.choices[data-type*="text"] .choices__button:hover,
.choices[data-type*="text"] .choices__button:focus {
  opacity: 1;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 7.5px 7.5px 3.75px;
  border-radius: 2.5px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}

.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choices__list--single {
  display: inline-block;
  width: 100%;
}

.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}

.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #005f75;
  border: 1px solid #004a5c;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box;
}

.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #004a5c;
  border: 1px solid #003642;
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  display: none;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--highlighted-bg);
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  word-break: break-all;
}

.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
  display: block;
}

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
  border-color: #b7b7b7;
}

.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable[data-select-text],
  .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
    padding-right: 100px;
  }

  .choices__list--dropdown .choices__item--selectable[data-select-text]::after,
  .choices__list[aria-expanded]
    .choices__item--selectable[data-select-text]::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  display: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
  opacity: 0.5;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray;
}

.choices__button {
  text-indent: -9999px;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}

.choices__input:focus {
  outline: 0;
}

.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration {
  display: none;
}

.choices__input::-ms-clear,
.choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.choices__placeholder {
  color: #888;
}

/* ------------------------------------------------------------

    Stile für Testaccounts, Feedbacks usw.
            
----------------------------------------------------------------*/

#sendFeedbackBtn {
  position: static;
  display: flex;
  right: auto;
  bottom: auto;
  z-index: auto;
}

/* -----------------------------

    Stile Ticket/Nachrichtensystem 

---------------------------------*/

.message-tab-box {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  background-color: var(--surface-card);
  border-radius: var(--light-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  min-height: calc(100dvh - var(--header-h) - var(--site-header-h) - 4rem);
  min-height: calc(100vh - var(--header-h) - var(--site-header-h) - 4rem);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.message-searchbar {
  position: relative;
  display: flex;
  background-color: var(--dark-bg);
  padding: 1rem 16px;
  max-height: 80px;
  align-items: center;
  gap: 1rem;
}

.message-searchbar input {
  max-height: 30px;
}

.message-searchbar svg {
  fill: var(--accent);
  position: absolute;
  right: 20px;
  background-color: white;
  padding: 0.2rem;
  border-left: 1px solid var(--accent);
  margin-left: 3px;
}

.message-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--dark-bg);
}

.message-count {
  display: flex;
  flex-direction: column;
}

.message-count-box {
  display: flex;
  gap: 1rem;
}

.message-filter-cntrl {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.message-filter-cntrl {
  background: none !important;
  border: none !important;
}

.message-filter-cntrl #showUnreadMessages {
  cursor: pointer;
}

.message-filter-cntrl #showUnreadMessages svg {
  fill: var(--dark-text);
  transition: all 0.3s ease;
}

.message-filter-cntrl #showUnreadMessages.active svg,
.message-filter-cntrl #showUnreadMessages:hover svg {
  fill: var(--accent);
}

.message-filter-cntrl button svg {
  fill: var(--accent);
}

#message-filter-indicator {
  font-weight: 500;
}

.message-count p {
  font-size: 0.8rem;
}

.message-tabs {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border-subtle);
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  justify-content: flex-start;
}

.message-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 1rem;
  padding: 1rem 16px;
  max-height: 80px;
  border-top: 1px solid rgb(230, 230, 230);
  width: 100%;
  text-align: left;
}

.message-tab.unread {
  background-color: var(--light-bg);
}

.message-tab h6 {
  font-size: 1rem;
}

.no-tickets {
  color: var(--accent);
  padding: 1rem 16px;
}

.message-tab-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#messageTabEexcerpt {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.notification-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  color: var(--light-text);
  background-color: var(--accent);
  font-size: 11px !important;
  line-height: 0;
}

.message-tab .notification-alert {
  position: absolute;
  width: 6px;
  height: 6px;
  right: 5px;
  top: 5px;
}

#adminTicketTable tbody td:nth-child(2) {
  position: relative;
}

#adminTicketTable .unread .notification-alert {
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
}

.nav-link-ctn .notification-alert {
  display: none;
}

.message-tabs button.read {
  background-color: white;
}

.message-ctn {
  display: flex;
  flex-direction: column;
}

.message-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 1rem 3rem;
  max-height: 80px;
  background-color: var(--dark-bg);
  min-height: 58px;
}

.message-controls button {
  color: var(--light-text);
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease;
}

.message-controls button:hover {
  color: var(--accent);
}

.message-content-ctn {
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

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

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  border-bottom: 1px solid var(--dark-text);
  width: 100%;
  padding: 0 3rem;
}

.message-infos {
  display: flex;
  flex-direction: column;
}

.message-header-controls {
  display: flex;
  gap: 1rem;
}

.message-header-controls button {
  display: flex;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  align-items: center;
  gap: 0.3rem;
}

.message-header-controls button svg {
  fill: var(--dark-text);
  width: 1rem;
  height: 1rem;
  transition: all 0.3s ease;
}

.message-header-controls button:hover {
  color: var(--accent);
}

.message-header-controls button:hover svg {
  fill: var(--accent);
}

#messageSubject {
  display: flex;
  align-items: center;
}

#messageSubject img {
  font-size: 1.3rem;
  width: 50px;
  height: auto;
}

#messageSubject h4 {
  font-size: 1.3rem;
}

.message-meta {
  display: flex;
  gap: 1rem;
}

.message-content .message-meta {
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--dark-text);
  align-items: center;
}

.message-meta img {
  width: 50px;
}

.message-meta p {
  display: flex;
  font-weight: 500;
  gap: 0.3rem;
}

.message-meta p span {
  font-weight: 400;
  font-size: inherit;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  padding: 1rem 3rem;
  gap: 1.5rem;
}

.single-message {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--light-bg);
  padding: 1rem;
  border-radius: var(--light-radius);
}

.from-support {
  font-weight: bold;
  background-color: var(--light-bg);
}

.from-user img {
  display: none;
}

.message-content {
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--dark-text);
}

.announcement {
  gap: 0.3rem;
}

.message-content .message-meta p {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 300;
}

@media (max-width: 768px) {
  .message-tab-box {
    grid-template-columns: 1fr;
  }

  .vertical-tab {
    flex-direction: row;
    min-width: 0;
    max-width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.16);
  }

  .vertical-tabs-ctn {
    padding: 1rem 0.5rem 1rem 0.5rem;
  }
}

/* ----------------------------------------------------------

    CRM Akquise: Vorlagen & Statistiken

--------------------------------------------------------------*/

/* Statistiken-KPIs (nur #crm-stats-kpis – Klasse .crm-stats-grid wird auch in der Kontaktübersicht genutzt) */
#crm-stats-kpis.crm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

/* Kontaktübersicht: feste 5 Spalten über volle Breite */
.nm-crm-page > .crm-stats-grid,
.nm-crm-page .crm-stats-grid#crmStatsGrid,
#crmStatsGrid.crm-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.crm-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.2rem;
  background: var(--nm-surface-raised, var(--bg-secondary, #f5f5f5));
  border: 1px solid var(--nm-border, transparent);
  border-radius: var(--nm-radius-md, var(--light-radius, 8px));
  box-shadow: var(--nm-shadow-sm, var(--shadow, none));
  color: var(--nm-text, inherit);
}

.crm-stat-label {
  font-size: 0.85rem;
  color: var(--nm-text-muted, inherit);
  opacity: 0.9;
}

.crm-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nm-text, inherit);
}

.crm-hint {
  font-size: 0.85rem;
  margin: 0.5rem 0 1rem;
  color: var(--nm-text-secondary, inherit);
  opacity: 0.9;
}

.crm-hint code {
  font-size: 0.8rem;
}

.crm-mail-preview {
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
  width: 100%;
  margin: 0;
  padding: 0.75rem;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: var(--light-radius, 8px);
}

.modal-content-wide {
  max-width: 720px;
  width: min(720px, calc(100vw - 2rem));
}

/*
 * Akquise-Mail-Modal: Viewport-sichere Höhe + eindeutiger Scroll-Container.
 * Globales `.modal-content { margin: auto; overflow-y: auto }` zentriert hohe Dialoge
 * so, dass der obere Inhalt im Overlay unerreichbar wird — hier scoped überschrieben.
 */
#akquise-mail-modal.modal {
  align-items: flex-start;
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

#akquise-mail-modal .modal-content {
  box-sizing: border-box;
  max-width: min(720px, calc(100vw - 2rem));
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  padding: 2.75rem 1.75rem 1.25rem;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
  overflow: hidden;
}

#akquise-mail-modal .akquise-mail-modal-header,
#akquise-mail-modal .modal-heading {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
}

#akquise-mail-modal .close-x {
  z-index: 2;
}

#akquise-mail-modal .form-field {
  width: 100%;
  max-width: none;
}

#akquise-mail-modal .custom-select {
  width: 100%;
}

#akquise-mail-modal .select-items {
  z-index: 10001;
}

#akquise-mail-modal textarea,
#akquise-mail-modal input[type="text"] {
  width: 100%;
}

.a#akquise-mail-modal .akquise-mail-modal-content {
  max-width: min(720px, calc(100vw - 2rem));
  width: min(720px, calc(100vw - 2rem));
}

.akquise-mail-column-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-align: left;
}

.akquise-mail-templates-hint {
  margin: 0;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
}

.akquise-mail-templates-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.akquise-mail-preview-wrap {
  width: 100%;
}

.akquise-mail-preview-panel {
  border: 1px solid #e2e8f0;
  border-radius: var(--light-radius, 8px);
  /* E-Mail-Vorschau immer hell – unabhängig vom App-Theme */
  background: #ffffff;
  color: #0f172a;
  color-scheme: light only;
  padding: 1rem 1.15rem;
  min-height: 220px;
  max-height: min(520px, 55vh);
  overflow-y: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.akquise-mail-preview-meta {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  text-align: left;
  color: #0f172a;
}

.akquise-mail-preview-meta-label {
  display: inline-block;
  min-width: 3.25rem;
  font-weight: 600;
  color: #64748b;
}

.akquise-mail-preview-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #0f172a;
  word-break: break-word;
  text-align: left;
}

#akquise-mail-modal .akquise-mail-preview-body > p,
#akquise-mail-modal .akquise-mail-preview-body p {
  margin: 0;
}

#akquise-mail-modal .akquise-mail-preview-body > ul,
#akquise-mail-modal .akquise-mail-preview-body ul {
  margin: 0.35em 0;
  padding-left: 1.25em;
  list-style-type: disc;
  list-style-position: outside;
}

#akquise-mail-modal .akquise-mail-preview-body > ol,
#akquise-mail-modal .akquise-mail-preview-body ol {
  margin: 0.35em 0;
  padding-left: 1.25em;
  list-style-type: decimal;
  list-style-position: outside;
}

#akquise-mail-modal .akquise-mail-preview-body li {
  margin: 0;
  display: list-item;
}

#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, ol, ul, li, h1, h2, h3, h4, h5, h6),
#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-signature
  :is(p, ol, ul, li, h1, h2, h3, h4, h5, h6) {
  text-align: left;
}

#akquise-mail-modal .modal-content .crm-hint,
#akquise-mail-modal .akquise-mail-column-label {
  text-align: left;
}

#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6)[style*="text-align: center"],
#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-center {
  text-align: center;
}

#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6)[style*="text-align: right"],
#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-right {
  text-align: right;
}

#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6)[style*="text-align: justify"],
#akquise-mail-modal
  .modal-content
  .akquise-mail-preview-body
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-justify {
  text-align: justify;
}

.akquise-mail-preview-body a {
  color: var(--accent);
  text-decoration: underline;
}

.akquise-mail-preview-signature {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475467;
  text-align: left;
}

.akquise-mail-preview-signature .ql-size-small {
  font-size: 0.75em;
}

.akquise-mail-preview-signature .ql-size-large {
  font-size: 1.5em;
}

.akquise-mail-preview-signature .ql-size-huge {
  font-size: 2.5em;
}

.akquise-mail-preview-signature[hidden] {
  display: none !important;
}

.akquise-mail-quote-option {
  display: flex;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-muted, #f8fafc);
}

.akquise-mail-quote-option[hidden] {
  display: none !important;
}

.akquise-mail-quote-option__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
}

.akquise-mail-quote-option__label {
  line-height: 1.3;
}

.akquise-mail-quote-option__meta {
  margin: 0.35rem 0 0 3.1rem;
}

.akquise-mail-quote-option__meta[hidden] {
  display: none !important;
}

.akquise-mail-preview-quote {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475467;
  text-align: left;
}

.akquise-mail-preview-quote[hidden] {
  display: none !important;
}

.akquise-mail-preview-quote blockquote {
  margin: 0.75rem 0 0;
  padding: 0 0 0 0.75rem;
  border-left: 3px solid #d0d5dd;
  color: #475467;
}

.akquise-mail-form-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.akquise-mail-form-body[hidden] {
  display: none !important;
}

.akquise-mail-modal-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  padding-right: 0.15rem;
}

.akquise-mail-modal-scroll > * + * {
  margin-top: 1rem;
}

.akquise-mail-modal-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

/* ---- CRM Mail A/B Phase 2: Segmented Control, Vorlagen, Preview-Skeleton ---- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nm-seg {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-muted, #f8fafc);
  max-width: 100%;
}

.nm-seg__btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 1;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.nm-seg__btn:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--text-primary, #0f172a);
}

/* Selected look: only via explicit selected markers — never via :disabled / first-child */
.nm-seg__btn.is-active,
.nm-seg__btn[aria-pressed="true"],
.nm-seg__btn[data-selected="true"] {
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  opacity: 1;
}

.nm-seg__btn:focus-visible {
  outline: 2px solid var(--color-primary, #7c5cfc);
  outline-offset: 2px;
  z-index: 1;
}

/* Disabled = not clickable. Must NOT clear or invert selected styling. */
.nm-seg.is-disabled {
  cursor: not-allowed;
}

.nm-seg.is-disabled .nm-seg__btn,
.nm-seg__btn[aria-disabled="true"],
.nm-seg__btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.nm-seg.is-disabled .nm-seg__btn:not(.is-active):not([aria-pressed="true"]):not([data-selected="true"]),
.nm-seg__btn[aria-disabled="true"]:not(.is-active):not([aria-pressed="true"]):not([data-selected="true"]),
.nm-seg__btn:disabled:not(.is-active):not([aria-pressed="true"]):not([data-selected="true"]) {
  opacity: 0.55;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary, #64748b);
}

/* Selected + locked (auto A/B): visible assignment, soft opacity — not a usable active toggle */
.nm-seg.is-disabled .nm-seg__btn.is-active,
.nm-seg.is-disabled .nm-seg__btn[aria-pressed="true"],
.nm-seg.is-disabled .nm-seg__btn[data-selected="true"],
.nm-seg__btn.is-active[aria-disabled="true"],
.nm-seg__btn[aria-pressed="true"][aria-disabled="true"],
.nm-seg__btn[data-selected="true"][aria-disabled="true"],
.nm-seg__btn.is-active:disabled,
.nm-seg__btn[aria-pressed="true"]:disabled,
.nm-seg__btn[data-selected="true"]:disabled {
  opacity: 0.78;
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.nm-seg.is-pending .nm-seg__btn {
  opacity: 0.55;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary, #64748b);
}

.akquise-mail-variant-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.akquise-mail-variant-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

.akquise-mail-variant-auto-hint {
  margin: 0;
}

.akquise-mail-preview-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.15rem 0;
}

.akquise-mail-preview-skeleton[hidden] {
  display: none !important;
}

.akquise-mail-preview-skeleton__meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #eef2f7;
}

.akquise-mail-preview-skeleton__to {
  width: 42%;
  max-width: 220px;
}

.akquise-mail-preview-skeleton__subject {
  width: 68%;
  max-width: 360px;
}

.akquise-mail-preview-skeleton__line {
  width: 100%;
}

.akquise-mail-preview-skeleton__line--mid {
  width: 78%;
}

.akquise-mail-preview-skeleton__line--short {
  width: 54%;
}

.akquise-mail-preview-skeleton__sig {
  width: 36%;
  max-width: 180px;
  margin-top: 0.75rem;
}

.akquise-mail-preview-content[hidden] {
  display: none !important;
}

.crm-vorlagen-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.crm-mail-ab-settings {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #fff);
}

.crm-mail-ab-settings__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.crm-mail-ab-settings__copy h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f172a);
}

.crm-mail-ab-settings__hint {
  margin: 0;
  max-width: 42rem;
}

.crm-mail-ab-settings__switch-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0.15rem 0 0;
  cursor: pointer;
}

.crm-mail-ab-settings__mode {
  margin: 0.65rem 0 0;
}

.crm-vorlagen-panels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.crm-mail-type-panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #fff);
}

.crm-mail-type-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.crm-mail-type-panel__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f172a);
}

.crm-mail-type-panel__active-label {
  margin: 0;
}

.crm-mail-type-panel__meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1rem;
}

.crm-mail-type-panel__meta dt {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
}

.crm-mail-type-panel__meta dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
  word-break: break-word;
}

.crm-mail-type-panel__revision {
  color: var(--text-secondary, #64748b);
  font-variant-numeric: tabular-nums;
}

.crm-mail-type-panel__actions {
  display: flex;
  justify-content: flex-start;
}

.crm-mail-type-panel--skeleton {
  pointer-events: none;
}

.crm-mail-type-panel__skeleton-copy {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

.crm-mail-type-panel__skel-title {
  width: min(12rem, 55%);
  height: 1.05rem;
  margin: 0;
}

.crm-mail-type-panel__skel-hint {
  width: min(9.5rem, 42%);
  height: 0.75rem;
  margin: 0;
}

.crm-mail-type-panel__skel-seg {
  width: 11.5rem;
  height: 2.1rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 999px;
}

.crm-mail-type-panel__meta--skeleton {
  align-items: end;
}

.crm-mail-type-panel__meta--skeleton .nm-skeleton--line {
  margin: 0;
  height: 2.1rem;
}

.crm-mail-type-panel__meta--skeleton .nm-skeleton--line:nth-child(1) {
  width: 100%;
}

.crm-mail-type-panel__meta--skeleton .nm-skeleton--line:nth-child(2) {
  width: 85%;
}

.crm-mail-type-panel__meta--skeleton .nm-skeleton--line:nth-child(3) {
  width: 4.5rem;
}

.crm-mail-type-panel__skel-btn {
  width: 7.25rem;
  height: 2.15rem;
  margin: 0;
}

.crm-vorlage-modal__subtitle {
  margin: 0.25rem 0 0;
}

.crm-vorlage-modal__variant-field {
  margin-bottom: 0.25rem;
}

.crm-vorlage-modal__variant-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

.crm-vorlage-modal__revision {
  margin: 0.35rem 0 0;
}

html[data-theme="dark"] .nm-seg {
  background: color-mix(in srgb, var(--surface-muted, #1e293b) 88%, #000);
  border-color: var(--border-color, #334155);
}

html[data-theme="dark"] .nm-seg__btn.is-active,
html[data-theme="dark"] .nm-seg__btn[aria-pressed="true"],
html[data-theme="dark"] .nm-seg__btn[data-selected="true"],
html[data-theme="dark"] .nm-seg.is-disabled .nm-seg__btn.is-active,
html[data-theme="dark"] .nm-seg.is-disabled .nm-seg__btn[aria-pressed="true"],
html[data-theme="dark"] .nm-seg.is-disabled .nm-seg__btn[data-selected="true"] {
  background: var(--surface, #0f172a);
  color: var(--text-primary, #f8fafc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  opacity: 0.78;
}

html[data-theme="dark"] .crm-mail-ab-settings,
html[data-theme="dark"] .crm-mail-type-panel {
  background: var(--surface, #0f172a);
  border-color: var(--border-color, #334155);
}

html[data-theme="dark"] .akquise-mail-preview-skeleton__meta {
  border-bottom-color: #e8edf3;
}

@media (max-width: 720px) {
  .crm-mail-ab-settings__row,
  .crm-mail-type-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  .nm-seg {
    width: 100%;
  }

  .nm-seg__btn {
    flex: 1 1 0;
    text-align: center;
  }

  .crm-mail-type-panel__meta {
    grid-template-columns: 1fr;
  }
}

/*
 * Follow-up-Einstellungen (CRM-Übersicht): gleiche Viewport-/Scroll-Logik wie Akquise-Mail-Modal.
 */
#crmFollowupSettingsModal.modal {
  align-items: flex-start;
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

#crmFollowupSettingsModal .crm-followup-settings-modal-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: min(520px, calc(100vw - 2rem));
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  padding: 2.75rem 1.75rem 1.25rem;
  gap: 0.75rem;
  overflow: hidden;
}

#crmFollowupSettingsModal .crm-followup-settings-modal-header {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  text-align: left;
}

#crmFollowupSettingsModal .crm-followup-settings-modal-header h4 {
  margin: 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f172a);
}

#crmFollowupSettingsModal .close-x {
  z-index: 2;
}

#crmFollowupSettingsModal .crm-followup-settings-hint {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
  text-align: left;
}

#crmFollowupSettingsModal .crm-followup-settings-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  gap: 0.75rem;
}

#crmFollowupSettingsModal .crm-followup-settings-modal-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
}

#crmFollowupSettingsModal .crm-followup-settings-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-muted, #f8fafc);
}

#crmFollowupSettingsModal .crm-followup-settings-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  cursor: pointer;
}

#crmFollowupSettingsModal .crm-followup-settings-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

#crmFollowupSettingsModal .crm-followup-settings-toggle__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  line-height: 1.35;
}

#crmFollowupSettingsModal .crm-followup-settings-toggle__hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
}

#crmFollowupSettingsModal .crm-followup-settings-grid {
  grid-template-columns: 1fr;
}

#crmFollowupSettingsModal .crm-followup-settings-grid .form-field {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

#crmFollowupSettingsModal .crm-followup-settings-grid .form-field > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

#crmFollowupSettingsModal .crm-followup-settings-grid select,
#crmFollowupSettingsModal .crm-followup-settings-grid input[type="number"] {
  width: 100%;
  box-sizing: border-box;
}

#crmFollowupSettingsModal
  .crm-followup-settings-form.is-disabled
  .crm-followup-settings-grid {
  opacity: 0.55;
  pointer-events: none;
}

#crmFollowupSettingsModal .save-status-crm-followup {
  flex: 0 0 auto;
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  color: var(--text-secondary, #64748b);
}

#crmFollowupSettingsModal .crm-followup-settings-modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  width: 100%;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

@media (min-width: 520px) {
  #crmFollowupSettingsModal .crm-followup-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #crmFollowupSettingsModal .crm-followup-delay2-wrap {
    grid-column: 1 / -1;
  }
}

.akquise-mail-sending {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 220px;
  padding: 2rem 1rem;
  text-align: center;
}

.akquise-mail-sending[hidden] {
  display: none !important;
}

.akquise-mail-sending-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: akquise-mail-spin 2.8s linear infinite;
}

.akquise-mail-sending-icon svg {
  width: 56px;
  height: 56px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}

.akquise-mail-sending-text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

#akquise-mail-modal.is-sending .close-x {
  pointer-events: none;
  opacity: 0.35;
}

@keyframes akquise-mail-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* CRM Mail-Vorlagen: Modal + Quill (scoped, E-Mail-Typografie wie Akquise-Preview) */
#vorlage-modal.modal {
  align-items: flex-start;
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

#vorlage-modal .modal-content.crm-vorlage-modal {
  box-sizing: border-box;
  max-width: min(960px, calc(100vw - 2rem));
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  padding: 2.75rem 1.75rem 1.25rem;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
  overflow: hidden;
}

#vorlage-modal .modal-heading {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

#vorlage-modal .modal-heading h4 {
  text-align: left;
}

#vorlage-modal .modal-content p {
  text-align: left;
}

#vorlage-modal #vorlage-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.75rem;
}

#vorlage-modal .form-field {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

#vorlage-modal .form-field input[type="text"] {
  width: 100%;
}

.crm-vorlage-modal .crm-vorlage-var-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}

.crm-vorlage-var-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary, #0f172a);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
}

.crm-vorlage-var-chip:hover,
.crm-vorlage-var-chip:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.crm-vorlage-modal .crm-vorlage-quill-toolbar {
  width: 100%;
  border: 1px solid var(--border-color, #e2e8f0);
  border-bottom: none;
  border-radius: var(--light-radius, 8px) var(--light-radius, 8px) 0 0;
  background: var(--bg-secondary, #f8fafc);
}

.crm-vorlage-modal .crm-vorlage-quill-editor {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0 0 var(--light-radius, 8px) var(--light-radius, 8px);
  background: #fff;
}

.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor {
  min-height: 280px;
  max-height: min(520px, 55vh);
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: left;
  color: var(--text-primary, #0f172a);
  word-break: break-word;
}

.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor > p,
.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor p {
  margin: 0;
}

.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor > ul,
.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor > ol,
.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor ul,
.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor ol {
  margin: 0.35em 0;
  padding-left: 1.25em;
}

.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor li {
  margin: 0;
}

.crm-vorlage-modal
  .crm-vorlage-quill-editor
  .ql-editor
  :is(p, ol, ul, li, h1, h2, h3, h4, h5, h6) {
  text-align: left;
}

.crm-vorlage-modal
  .crm-vorlage-quill-editor
  .ql-editor
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-center {
  text-align: center;
}

.crm-vorlage-modal
  .crm-vorlage-quill-editor
  .ql-editor
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-right {
  text-align: right;
}

.crm-vorlage-modal
  .crm-vorlage-quill-editor
  .ql-editor
  :is(p, li, h1, h2, h3, h4, h5, h6).ql-align-justify {
  text-align: justify;
}

.crm-vorlage-modal .crm-vorlage-quill-editor .ql-editor a {
  color: var(--accent);
  text-decoration: underline;
}

.crm-vorlage-modal .ql-placeholder-token {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  margin: 0 0.05rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
}

.crm-vorlage-modal .ql-placeholder-token--unknown {
  background: color-mix(in srgb, #fc5757 12%, #fff);
  border-color: color-mix(in srgb, #fc5757 35%, transparent);
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chronik-user {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.65;
}

.crm-stats-filters .control-ctn {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.crm-stats-custom-dates {
  min-width: 9rem;
}

.crm-stats-custom-dates[hidden] {
  display: none !important;
}

/* -----------------------------
   CRM Detailseite (SaaS-Layout)
------------------------------*/

.crm-detail-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
  align-content: stretch;
  align-items: stretch;
}

.crm-detail-page > .nm-page-header {
  width: 100%;
  margin-bottom: 0;
}

.crm-detail-page > .box,
.crm-detail-page > .crm-detail-layout {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

.crm-breadcrumb-sep {
  margin: 0 0.35rem;
  color: var(--nm-text-muted, var(--text-muted));
  font-weight: 400;
}

.crm-detail-hero {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.25rem;
  min-height: 0;
}

.crm-detail-hero-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 22rem;
}

.crm-detail-avatar.avatar-wrapper {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.crm-detail-avatar.avatar-wrapper img {
  border: 2px solid var(--border-subtle);
}

.crm-detail-avatar .avatar-overlay {
  border-radius: 50%;
}

.crm-detail-avatar .avatar-overlay button {
  margin: 0 4px;
  font-size: 14px;
}

.crm-detail-identity {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.crm-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.crm-detail-company {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-text);
}

.crm-detail-person {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.3;
}

.crm-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: var(--nm-radius-pill, 999px);
  background: rgba(252, 79, 79, 0.1);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.crm-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.crm-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-md);
  background: var(--light-bg);
  border: 1px solid var(--border-subtle);
  color: var(--dark-text);
  font-size: 0.82rem;
  text-decoration: none;
  transition:
    border-color var(--transition),
    color var(--transition);
}

.crm-meta-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-meta-chip svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  fill: none;
}

.crm-meta-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.crm-meta-chip-static {
  cursor: default;
}

.crm-detail-hero-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.crm-followup-inline {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.8rem;
  background: var(--light-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.crm-followup-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.2;
}

.crm-followup-inline .followup-status,
.crm-followup-card .followup-status {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark-text);
  line-height: 1.25;
}

.crm-detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.crm-detail-cta .normal-btn,
.crm-detail-cta .normal-btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.crm-btn-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.crm-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.4fr);
  gap: var(--space-5);
  align-items: start;
  width: 100%;
}

.crm-detail-aside,
.crm-detail-main {
  display: block;
  min-width: 0;
  width: 100%;
}

.crm-detail-card {
  gap: var(--space-4);
  width: 100%;
  max-width: none;
}

.crm-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.crm-card-header p {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.crm-detail-page .form-field {
  width: 100%;
  max-width: none;
  flex: unset;
}

.crm-field-full {
  grid-column: 1 / -1;
}

.crm-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.crm-detail-tabs-card {
  min-height: 480px;
}

.crm-detail-tabs {
  border-right: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  margin-bottom: 0.25rem;
}

.crm-detail-page .tabcontent {
  padding-top: var(--space-4);
  width: 100%;
}

.crm-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--light-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.crm-composer h4,
.crm-timeline-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.crm-timeline-header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.crm-inline-loader {
  display: none;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0;
  color: var(--text-muted);
}

.crm-note-panel {
  min-height: 220px;
  max-height: none;
}

.crm-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.crm-nachfassen-date {
  margin-top: 1rem;
  width: 100%;
}

.crm-detail-page #activities {
  max-height: none;
  overflow: visible;
}

.crm-detail-page #chronik-eintraege {
  gap: 1.25rem;
}

.crm-detail-page .chronik-eintrag {
  padding: 0.85rem 1rem;
  background: var(--light-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-subtle);
}

.crm-detail-page .chronik-date-ctn {
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .crm-detail-layout {
    grid-template-columns: 1fr;
  }

  .crm-detail-hero-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .crm-detail-hero-left {
    flex: 1 1 100%;
  }

  .nm-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------

    Stile DSGVO Seiten (AGB, IMPRESSUM, DATENSCHUTZ

--------------------------------------------------------------*/

.dsgvo-ctn {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  background-color: white;
  padding: 3rem 2rem;
  border-radius: var(--light-radius);
  box-shadow: var(--shadow);
}

.dsgvo-ctn h1 {
  font-size: 2.5rem;
}

.dsgvo-ctn h2 {
  font-size: 1.3rem;
}

.dsgvo-ctn h3 {
  font-size: 1.1rem;
}

/* ==========================================================================
   Home Dashboard (nm-dash)
   ========================================================================== */

.nm-dash-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Altes 12-Spalten-.overview-Grid für die Startseite vollständig außer Kraft setzen.
 * Kritisch: globales section { flex-wrap: wrap } sonst zweite unsichtbare Flex-Spalte. */
section.nm-dash.overview,
section.nm-dash.overview.dashboard-page {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  float: none;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 20px;
  width: 100%;
  max-width: 3200px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
}

section.nm-dash.overview > * {
  float: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-column: auto;
}

.nm-dash-hero__title {
  margin: 0;
  font-size: clamp(1.55rem, 1.8vw, 1.95rem);
  font-weight: 700;
  color: var(--dashboard-card-text, var(--nm-text));
  letter-spacing: -0.02em;
}

.nm-dash-hero__wave {
  font-size: 0.9em;
}

.nm-dash-hero__sub {
  margin: 0.35rem 0 0;
  color: var(--dashboard-card-muted, var(--nm-text-muted));
  font-size: 0.95rem;
}

.nm-dash-kpis,
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.nm-dash-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 128px;
  height: 132px;
  padding: 18px 18px 16px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--dashboard-card-bg, var(--nm-surface-raised));
  border: 1px solid var(--dashboard-card-border, var(--nm-dash-card-border));
  box-shadow: var(--dashboard-card-shadow, var(--nm-dash-card-shadow));
  text-decoration: none;
  color: var(--dashboard-card-text, var(--nm-text));
  overflow: hidden;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
  animation: nm-dash-fade-in 280ms ease both;
  min-width: 0;
}

.nm-dash-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--nm-shadow-md);
}

.nm-dash-kpi--muted {
  opacity: 0.72;
  pointer-events: none;
}

.nm-dash-kpi__top {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.nm-dash-kpi__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nm-radius-md, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nm-dash-kpi--green .nm-dash-kpi__icon {
  background: var(--kpi-green-soft);
  color: var(--kpi-green);
}
.nm-dash-kpi--yellow .nm-dash-kpi__icon {
  background: var(--kpi-yellow-soft);
  color: var(--kpi-yellow);
}
.nm-dash-kpi--pink .nm-dash-kpi__icon {
  background: var(--kpi-pink-soft);
  color: var(--kpi-pink);
}
.nm-dash-kpi--blue .nm-dash-kpi__icon {
  background: var(--kpi-blue-soft);
  color: var(--kpi-blue);
}
.nm-dash-kpi--purple .nm-dash-kpi__icon {
  background: var(--kpi-purple-soft);
  color: var(--kpi-purple);
}

.nm-dash-kpi__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dashboard-card-muted, var(--nm-text-muted));
}

.nm-dash-kpi__value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--dashboard-card-text, var(--nm-text));
}

.nm-dash-kpi__hint {
  font-size: 0.75rem;
  color: var(--dashboard-card-muted, var(--nm-text-muted));
}

.nm-dash-kpi__spark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 88px;
  height: 34px;
  pointer-events: none;
}

.nm-dash-kpi__spark canvas {
  width: 88px !important;
  height: 34px !important;
  display: block;
}

.nm-dash-actions-card {
  width: 100%;
  padding: 14px 16px 16px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--dashboard-card-bg, var(--quick-action-bg));
  border: 1px solid var(--dashboard-card-border, var(--quick-action-border));
  box-shadow: var(--dashboard-card-shadow);
  min-width: 0;
}

.nm-dash-actions-card__title {
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--dashboard-card-text, var(--nm-text));
}

.nm-dash-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.nm-dash-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 42px;
  padding: 0 14px 0 8px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--quick-action-border);
  background: var(--quick-action-bg);
  color: var(--quick-action-text);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
  flex: 0 0 auto;
}

.nm-dash-action:hover,
.nm-dash-action:focus-visible {
  background: var(--quick-action-hover-bg);
  outline: none;
}

.nm-dash-action__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--quick-action-icon-bg);
  color: var(--quick-action-text);
  flex-shrink: 0;
}

.nm-dash-action--primary .nm-dash-action__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--nm-radius-md, 8px);
  background: var(--quick-action-primary-icon-bg);
  color: #fff;
}

.nm-dash-action--primary {
  background: var(--quick-action-bg);
  border-color: var(--quick-action-border);
  color: var(--quick-action-text);
}

.nm-dash-grid,
.dashboard-main-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.nm-dash-grid > *,
.dashboard-main-grid > * {
  min-width: 0;
}

.nm-dash-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--dashboard-card-bg);
  border: 1px solid var(--dashboard-card-border);
  box-shadow: var(--dashboard-card-shadow);
  color: var(--dashboard-card-text);
  overflow: hidden;
  animation: nm-dash-fade-in 320ms ease both;
}

.nm-dash-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.nm-dash-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--dashboard-card-text);
}

.nm-dash-card__foot {
  margin-top: auto;
  padding-top: 1rem;
}

.nm-dash-link {
  color: var(--dashboard-card-muted);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
}

.nm-dash-link:hover {
  color: var(--nm-brand);
}

.nm-dash-status {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
}

.nm-dash-status__chart {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

.nm-dash-status__chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.nm-dash-status__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nm-dash-status__center strong {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--dashboard-card-text);
}

.nm-dash-status__center span {
  font-size: 0.72rem;
  color: var(--dashboard-card-muted);
}

.nm-dash-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--dashboard-card-muted);
}

.nm-dash-legend em {
  font-style: normal;
  color: var(--dashboard-card-text);
  font-weight: 600;
  margin-left: 0.25rem;
}

.nm-dash-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.45rem;
}

.dot--online {
  background: #32c875;
}
.dot--warn {
  background: #f0b429;
}
.dot--offline {
  background: var(--nm-brand);
}
.dot--maint {
  background: #3b82f6;
}

.nm-dash-update-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.nm-dash-update-list > li {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 0;
  border-radius: var(--nm-radius-md, 10px);
  background: transparent;
}

.nm-dash-update-list__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nm-radius-md, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--dashboard-card-bg);
  border: 1px solid var(--dashboard-card-border);
  color: var(--dashboard-card-muted);
  flex-shrink: 0;
}

.nm-dash-update-list__label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--dashboard-card-text);
  text-align: left;
}

.nm-dash-update-list strong {
  font-size: 1rem;
  color: var(--dashboard-card-text);
  font-weight: 650;
  min-width: 1.75rem;
  text-align: right;
}

.nm-dash-update-list strong#core-update-counter,
.nm-dash-update-list strong#plugin-update-counter,
.nm-dash-update-list strong#themes-update-counter {
  font-size: inherit;
  font-weight: inherit;
  min-width: 16px;
  text-align: center;
  color: var(--light-text);
}

/* Dashboard Update Center */
.nm-uc-card {
  position: relative;
}

/* display:flex auf Panels/Action-Bar/Preloader überschreibt sonst UA-[hidden] */
.nm-uc-card [hidden] {
  display: none !important;
}

.nm-uc-head {
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nm-uc-head__titles {
  flex: 1;
  min-width: 0;
}

.nm-uc-summary {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--dashboard-card-muted, #667085);
  line-height: 1.35;
}

.nm-uc-partial {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-head__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.nm-uc-header-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-header-status__spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid
    color-mix(in srgb, var(--nm-brand, #7c5cfc) 35%, transparent);
  border-top-color: var(--nm-brand, #7c5cfc);
  animation: nm-uc-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .nm-uc-header-status__spin {
    animation: none;
  }
}

.nm-uc-sync {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
}

.nm-uc-cat__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  margin: 0;
  border: 1px solid var(--dashboard-card-border, #e4e7ec);
  border-radius: var(--nm-radius-md, 10px);
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f8f9fb) 70%,
    transparent
  );
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.nm-uc-cat__toggle:hover {
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f2f4f7) 90%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--dashboard-card-border, #d0d5dd) 80%,
    var(--nm-brand, #7c5cfc)
  );
}

.nm-uc-cat__toggle:focus-visible {
  outline: 2px solid var(--nm-brand, #7c5cfc);
  outline-offset: 2px;
}

.nm-uc-cat.is-expanded .nm-uc-cat__toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--dashboard-card-bg, #fff);
  border-color: var(--dashboard-card-border, #e4e7ec);
}

.nm-uc-chevron {
  flex-shrink: 0;
  color: var(--dashboard-card-muted, #98a2b3);
  transition: transform 0.15s ease;
}

.nm-uc-cat.is-expanded > .nm-uc-cat__toggle .nm-uc-chevron,
.nm-uc-site.is-expanded .nm-uc-chevron {
  transform: rotate(90deg);
}

.nm-uc-preloader {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nm-uc-panel {
  border: 1px solid var(--dashboard-card-border, #e4e7ec);
  border-top: 0;
  border-radius: 0 0 var(--nm-radius-md, 10px) var(--nm-radius-md, 10px);
  padding: 0.75rem 0.7rem 0.85rem;
  background: var(--dashboard-card-bg, #fff);
}

.nm-uc-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
}

.nm-uc-panel__title {
  margin: 0;
  font-size: 0.82rem;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--dashboard-card-text, #1d2939);
  cursor: pointer;
  user-select: none;
}

.nm-uc-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--nm-brand, #7c5cfc);
}

.nm-uc-sites {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nm-uc-site__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.nm-uc-site__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
  margin: 0;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f8f9fb) 80%,
    transparent
  );
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.nm-uc-site__toggle:hover {
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f2f4f7) 100%,
    transparent
  );
}

.nm-uc-site__toggle:focus-visible {
  outline: 2px solid var(--nm-brand, #7c5cfc);
  outline-offset: 1px;
}

.nm-uc-site__name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm-uc-site__count {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-site__panel {
  padding: 0.35rem 0 0.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nm-uc-site-detail-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem 0.5rem;
  font-size: 0.84rem;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-site-detail-status--loading {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.nm-uc-site-detail-status__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid
    color-mix(in srgb, var(--nm-brand, #7c5cfc) 25%, transparent);
  border-top-color: var(--nm-brand, #7c5cfc);
  animation: nm-uc-detail-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes nm-uc-detail-spin {
  to {
    transform: rotate(360deg);
  }
}

.nm-uc-site-detail-status--error .nm-uc-site-detail-status__text {
  margin: 0;
  color: var(--dashboard-card-text, #1d2939);
}

.nm-uc-site-detail-status__retry {
  font-size: 0.82rem;
  padding: 0.25rem 0.55rem;
}

@media (prefers-reduced-motion: reduce) {
  .nm-uc-site-detail-status__spinner {
    animation: none;
    border-top-color: var(--nm-brand, #7c5cfc);
    opacity: 0.65;
  }
}

.nm-uc-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.35rem;
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}

.nm-uc-item:hover {
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f8f9fb) 90%,
    transparent
  );
}

.nm-uc-item.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.nm-uc-item input {
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  accent-color: var(--nm-brand, #7c5cfc);
  flex-shrink: 0;
}

.nm-uc-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.nm-uc-item__name {
  font-weight: 550;
  color: var(--dashboard-card-text, #1d2939);
}

.nm-uc-item__versions {
  font-size: 0.78rem;
  color: var(--dashboard-card-muted, #667085);
  font-variant-numeric: tabular-nums;
}

.nm-uc-item__arrow {
  margin: 0 0.2rem;
  opacity: 0.7;
}

.nm-uc-item--core {
  align-items: center;
  cursor: default;
}

.nm-uc-item__link {
  flex-shrink: 0;
  font-size: 0.78rem;
  text-decoration: none;
}

.nm-uc-empty {
  margin: 0;
  padding: 0.5rem 0.15rem;
  font-size: 0.86rem;
  color: var(--dashboard-card-muted, #667085);
}

.nm-uc-empty--soft {
  font-size: 0.8rem;
}

.nm-uc-org-freshness {
  margin: 0.65rem 0 0;
}

.nm-uc-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--dashboard-card-border, #e4e7ec);
  border-radius: var(--nm-radius-md, 10px);
  background: color-mix(
    in srgb,
    var(--nm-surface-sunken, #f8f9fb) 85%,
    transparent
  );
}

.nm-uc-action-bar__count {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--dashboard-card-text, #1d2939);
}

.nm-uc-action-bar__btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .nm-uc-head {
    flex-direction: column;
  }

  .nm-uc-head__actions {
    width: 100%;
    justify-content: space-between;
  }

  .nm-uc-site__panel {
    padding-left: 0.35rem;
  }

  .nm-uc-action-bar {
    position: sticky;
    bottom: 0.5rem;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
  }

  .nm-uc-action-bar__btns {
    flex-direction: column;
  }

  .nm-uc-action-bar__btns .nm-btn {
    width: 100%;
    justify-content: center;
  }
}

.nm-dash-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.nm-dash-task {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 44px;
}

.nm-dash-task__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.nm-dash-task__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nm-dash-task__body strong {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dashboard-card-text);
}

.nm-dash-task__meta,
.nm-dash-task__when {
  font-size: 0.75rem;
  color: var(--dashboard-card-muted);
}

.nm-dash-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 0.5rem;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--nm-surface-sunken);
  color: var(--dashboard-card-muted);
}

.nm-dash-badge--danger {
  background: rgba(252, 79, 79, 0.12);
  color: var(--nm-brand);
}

.nm-dash-time__value {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--dashboard-card-text);
}

.nm-dash-time__meta {
  color: var(--dashboard-card-muted);
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

.nm-dash-time__chart {
  position: relative;
  flex: 1;
  min-height: 120px;
  max-height: 160px;
}

.nm-dash-select select {
  border: 1px solid var(--dashboard-card-border);
  background: var(--dashboard-card-bg);
  color: var(--dashboard-card-text);
  border-radius: var(--nm-radius-md, 8px);
  min-height: 32px;
  padding: 0 0.55rem;
  font-size: 0.8rem;
}

/* Activity feed — category filter (card dropdown + modal pills) */
.nm-dash-card__head--activity {
  align-items: flex-start;
}

.nm-dash-activity-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.nm-dash-activity-card__title-row .nm-dash-card__title {
  margin: 0;
}

.nm-dash-activity-cat {
  position: relative;
  flex-shrink: 0;
}

.nm-dash-activity-cat__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--dashboard-card-muted, #64748b);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-dash-activity-cat__trigger svg {
  width: 1rem;
  height: 1rem;
}

.nm-dash-activity-cat__trigger:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--dashboard-card-text, #0f172a);
}

.nm-dash-activity-cat__trigger:focus-visible {
  outline: 2px solid var(--color-focus, #c4b5fd);
  outline-offset: 2px;
}

.nm-dash-activity-cat__trigger.is-filtered {
  color: var(--nm-brand, #7c5cfc);
  background: rgba(124, 92, 252, 0.08);
  border-color: rgba(124, 92, 252, 0.18);
}

.nm-dash-activity-cat.is-open .nm-dash-activity-cat__trigger {
  background: rgba(124, 92, 252, 0.1);
  color: var(--nm-brand, #7c5cfc);
  border-color: rgba(124, 92, 252, 0.22);
}

.nm-dash-activity-cat__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  min-width: min(18rem, calc(100vw - 2rem));
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--dashboard-card-border, rgba(15, 23, 42, 0.08));
  background: var(--dashboard-card-bg, #fff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.nm-dash-activity-cat__dropdown[hidden] {
  display: none !important;
}

.nm-dash-activity-modal__cat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 1.35rem 0.65rem;
}

.nm-activity-cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
  color: var(--dashboard-card-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-activity-cat-pill:hover:not(.is-active) {
  background: rgba(15, 23, 42, 0.06);
  color: var(--dashboard-card-text, #334155);
}

.nm-activity-cat-pill:focus-visible {
  outline: 2px solid var(--color-focus, #c4b5fd);
  outline-offset: 2px;
}

.nm-activity-cat-pill.is-active {
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.nm-activity-cat-pill--all.is-active {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.28);
  color: #475569;
}

.nm-activity-cat-pill--website-management.is-active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
  color: #15803d;
}

.nm-activity-cat-pill--crm.is-active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
  color: #1d4ed8;
}

.nm-activity-cat-pill--tasks.is-active {
  background: rgba(124, 92, 252, 0.12);
  border-color: rgba(124, 92, 252, 0.28);
  color: #6d28d9;
}

.nm-activity-cat-pill--time-tracking.is-active {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.32);
  color: #b45309;
}

.nm-activity-cat-pill--general.is-active {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.32);
  color: #475569;
}

.nm-dash-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.nm-dash-activity__li {
  margin: 0;
  padding: 0;
}

.nm-dash-activity__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
  padding: 0.35rem 0.25rem;
  border-radius: var(--nm-radius-md, 8px);
  text-decoration: none;
  color: inherit;
}

a.nm-dash-activity__item--link {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

a.nm-dash-activity__item--link:hover {
  background: var(--nm-surface-sunken, rgba(16, 24, 40, 0.04));
}

a.nm-dash-activity__item--link:focus-visible {
  outline: 2px solid var(--nm-brand, #fc4f4f);
  outline-offset: 2px;
}

.nm-dash-activity__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--nm-radius-md, 8px);
  background: var(--nm-surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dashboard-card-muted);
  flex-shrink: 0;
}

.nm-dash-activity__icon svg {
  width: 15px;
  height: 15px;
}

.nm-dash-activity__icon[data-module="crm"] {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.nm-dash-activity__icon[data-module="clients"] {
  background: rgba(252, 79, 79, 0.12);
  color: var(--nm-brand, #fc4f4f);
}

.nm-dash-activity__icon[data-module="websites"] {
  background: rgba(18, 183, 106, 0.14);
  color: #12b76a;
}

.nm-dash-activity__icon[data-module="tasks"] {
  background: rgba(122, 90, 248, 0.14);
  color: #7a5af8;
}

.nm-dash-activity__icon[data-tone="danger"] {
  background: rgba(252, 79, 79, 0.18);
  color: #d92d20;
}

.nm-dash-activity__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.nm-dash-activity__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dashboard-card-muted);
  margin-bottom: 0.05rem;
}

.nm-dash-activity__title {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dashboard-card-text);
  word-break: break-word;
}

.nm-dash-activity__meta,
.nm-dash-activity__item time {
  font-size: 0.75rem;
  color: var(--dashboard-card-muted);
  line-height: 1.35;
}

.nm-dash-activity__chevron {
  width: 16px;
  height: 16px;
  margin-top: 0.35rem;
  color: var(--dashboard-card-muted);
  opacity: 0.55;
  flex-shrink: 0;
}

.nm-dash-activity__skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(16, 24, 40, 0.06) 25%,
    rgba(16, 24, 40, 0.1) 50%,
    rgba(16, 24, 40, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: nm-dash-activity-shimmer 1.2s ease-in-out infinite;
}

.nm-dash-activity__icon.nm-dash-activity__skel {
  width: 28px;
  height: 28px;
}

.nm-dash-activity__skel--title {
  height: 0.85rem;
  width: 78%;
  margin-bottom: 0.35rem;
}

.nm-dash-activity__skel--meta {
  height: 0.7rem;
  width: 42%;
}

@keyframes nm-dash-activity-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-dash-activity__skel {
    animation: none;
  }
}

.nm-dash-activity-error {
  font-size: 0.82rem;
  color: var(--dashboard-card-muted);
  line-height: 1.4;
}

button.nm-dash-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.nm-dash-activity-modal {
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: 560px;
  width: calc(100% - 2rem);
  padding: 0 !important;
  max-height: min(90vh, 760px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--dashboard-card-border, #e7ecf3);
  box-shadow:
    0 24px 48px rgba(16, 24, 40, 0.12),
    0 0 0 1px rgba(16, 24, 40, 0.02);
  background:
    linear-gradient(180deg, rgba(252, 79, 79, 0.04) 0%, transparent 120px),
    var(--dashboard-card-bg, #fff);
}

.nm-dash-activity-modal > .close-x {
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.nm-dash-activity-modal__header {
  width: 100%;
  padding: 1.35rem 1.5rem 0.85rem;
  padding-right: 3rem;
  box-sizing: border-box;
}

.nm-dash-activity-modal__heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nm-dash-activity-modal h3 {
  margin: 0;
  align-self: flex-start;
  width: 100%;
  padding-right: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dashboard-card-text, #182230);
}

.nm-dash-activity-modal__sub {
  margin: 0 !important;
  align-self: flex-start;
  color: var(--dashboard-card-muted, #667085);
  font-size: 0.82rem !important;
  line-height: 1.45;
}

.nm-dash-activity-modal__seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem;
  width: calc(100% - 3rem);
  margin: 0 1.5rem 0.85rem;
  padding: 0.22rem;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--nm-surface-sunken, rgba(16, 24, 40, 0.05));
  border: 1px solid var(--dashboard-card-border, #e7ecf3);
}

.nm-dash-activity-modal__seg-btn {
  appearance: none;
  border: 0;
  margin: 0;
  min-height: 34px;
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  background: transparent;
  color: var(--dashboard-card-muted, #667085);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-dash-activity-modal__seg-btn:hover {
  color: var(--dashboard-card-text, #182230);
}

.nm-dash-activity-modal__seg-btn:focus-visible {
  outline: 2px solid var(--nm-brand, #fc4f4f);
  outline-offset: 1px;
}

.nm-dash-activity-modal__seg-btn.is-active {
  background: var(--dashboard-card-bg, #fff);
  color: var(--dashboard-card-text, #182230);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.nm-dash-activity-modal__scroll {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0.35rem 1.15rem 0.5rem;
  box-sizing: border-box;
  border-top: 1px solid var(--dashboard-card-border, #e7ecf3);
  border-bottom: 1px solid var(--dashboard-card-border, #e7ecf3);
  background: rgba(16, 24, 40, 0.015);
  scrollbar-gutter: stable;
}

.nm-dash-activity-modal__empty {
  margin: 1.25rem 0.25rem !important;
  text-align: center;
  line-height: 1.45;
}

.nm-dash-activity--modal {
  gap: 0.35rem;
}

.nm-dash-activity-modal__more {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.65rem 1.5rem 0.15rem;
  box-sizing: border-box;
  margin: 0;
}

.nm-dash-activity-modal__more .normal-btn-2 {
  min-width: 140px;
}

.nm-dash-activity-modal .btn-ctn {
  width: 100%;
  margin-top: 0;
}

.nm-dash-activity-modal__footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 0.9rem 1.5rem 1.15rem;
  box-sizing: border-box;
  background: var(--dashboard-card-bg, #fff);
}

.nm-dash-activity-modal__footer .danger-btn {
  margin-right: auto;
}

.nm-dash-activity-modal__footer .normal-btn {
  margin-left: auto;
}

.nm-dash-activity-modal #dashActivityClearError {
  margin: 0.35rem 1.5rem 0;
  width: calc(100% - 3rem);
  box-sizing: border-box;
}

html[data-theme="dark"] .nm-dash-activity-modal {
  background:
    linear-gradient(180deg, rgba(252, 79, 79, 0.08) 0%, transparent 120px),
    var(--dashboard-card-bg, #131d2b);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .nm-dash-activity-modal__scroll {
  background: rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .nm-dash-activity-modal__seg-btn.is-active {
  background: var(--dashboard-card-bg, #131d2b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .nm-dash-activity-cat__trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--dashboard-card-text, #e2e8f0);
}

html[data-theme="dark"] .nm-dash-activity-cat__dropdown {
  background: var(--dashboard-card-bg, #131d2b);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .nm-activity-cat-pill {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .nm-activity-cat-pill:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .nm-activity-cat-pill--all.is-active {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

html[data-theme="dark"] .nm-activity-cat-pill--website-management.is-active {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

html[data-theme="dark"] .nm-activity-cat-pill--crm.is-active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

html[data-theme="dark"] .nm-activity-cat-pill--tasks.is-active {
  background: rgba(124, 92, 252, 0.18);
  border-color: rgba(124, 92, 252, 0.35);
  color: #c4b5fd;
}

html[data-theme="dark"] .nm-activity-cat-pill--time-tracking.is-active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.38);
  color: #fcd34d;
}

html[data-theme="dark"] .nm-activity-cat-pill--general.is-active {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.38);
  color: #cbd5e1;
}

.nm-dash-activity-clear-modal {
  max-width: 480px;
  width: min(480px, calc(100% - 1.5rem));
}

.nm-dash-activity-clear-modal p {
  margin: 0.75rem 0 1.25rem;
  color: var(--dashboard-card-muted, var(--muted-text, #64748b));
  line-height: 1.45;
  font-size: 0.95rem;
}

.nm-dash-activity-clear-modal__actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .nm-dash-activity-modal {
    width: calc(100% - 1rem);
    max-height: 92vh;
    border-radius: 14px;
    padding: 0 !important;
  }

  .nm-dash-activity-modal__header {
    padding: 1.15rem 1.1rem 0.7rem;
    padding-right: 2.75rem;
  }

  .nm-dash-activity-modal__seg {
    width: calc(100% - 2.2rem);
    margin: 0 1.1rem 0.75rem;
  }

  .nm-dash-activity-modal__scroll {
    max-height: min(58vh, 480px);
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .nm-dash-activity-modal__more,
  .nm-dash-activity-modal__footer {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .nm-dash-activity__item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .nm-dash-activity__chevron {
    display: none;
  }

  .nm-dash-activity-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .nm-dash-activity-modal__footer .danger-btn,
  .nm-dash-activity-modal__footer .normal-btn {
    margin: 0;
    width: 100%;
  }

  .nm-dash-activity-clear-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .nm-dash-activity-clear-modal__actions .danger-btn,
  .nm-dash-activity-clear-modal__actions .normal-btn-2 {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-dash-activity-modal__seg-btn {
    transition: none;
  }
}

.nm-dash-system {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.nm-dash-system li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.88rem;
  color: var(--dashboard-card-text);
}

.nm-dash-system em {
  font-style: normal;
  color: var(--dashboard-card-muted);
  font-size: 0.8rem;
}

.nm-dash-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--dashboard-card-border);
  position: relative;
}

.nm-dash-check[data-state="ok"] {
  border-color: #32c875;
  background: #32c875;
}

.nm-dash-check[data-state="ok"]::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nm-dash-check[data-state="warn"] {
  border-color: #f0b429;
  background: #f0b429;
}

.nm-dash-empty {
  margin: 0;
  color: var(--dashboard-card-muted);
  font-size: 0.88rem;
  list-style: none;
}

.nm-dash-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid
    color-mix(in srgb, #f0b429 35%, var(--dashboard-card-border));
  background: color-mix(in srgb, #f0b429 12%, var(--dashboard-card-bg));
  width: 100%;
}

.nm-dash-tip__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.nm-dash-tip__content p {
  margin: 0;
  color: var(--dashboard-card-text);
  font-size: 0.9rem;
}

.nm-dash-tip__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nm-dash-tip__btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  background: var(--dashboard-card-bg);
  border: 1px solid var(--dashboard-card-border);
  color: var(--dashboard-card-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}

.nm-dash-tip__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--dashboard-card-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

@keyframes nm-dash-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-dash-kpi,
  .nm-dash-card {
    animation: none;
  }
}

@media (max-width: 1279px) and (min-width: 900px) {
  .nm-dash-kpis,
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nm-dash-grid,
  .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  section.nm-dash.overview,
  section.nm-dash.overview.dashboard-page {
    padding: 20px 16px 28px;
    gap: 18px;
  }
  .nm-dash-kpis,
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nm-dash-grid,
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  section.nm-dash.overview,
  section.nm-dash.overview.dashboard-page {
    padding: 16px 14px 24px;
  }
  .nm-dash-kpis,
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }
  .nm-dash-kpi {
    height: auto;
    min-height: 120px;
  }
  .nm-dash-actions {
    flex-wrap: nowrap;
  }
  .nm-dash-status {
    flex-direction: column;
    align-items: flex-start;
  }
  .nm-dash-tip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Websites Overview (nm-websites-page)
   ========================================================================== */

/*
 * Kritisch: Globales `section { flex-wrap: wrap }` erzeugt bei wachsendem
 * Inhalt eine zweite Flex-Spalte rechts (durch overflow-x: hidden unsichtbar).
 * Deshalb explizit nowrap — analog Tasks/CRM/Clients/Detail.
 */
section.nm-websites-page,
.nm-websites-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 24px;
  width: 100%;
  max-width: 3200px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
}

.nm-websites-page [hidden] {
  display: none !important;
}

.nm-websites-page .nm-page-header {
  margin-bottom: 0;
  width: 100%;
}

.website-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.website-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--app-surface-bg, var(--nm-surface-raised));
  border: 1px solid
    var(--app-border, var(--dashboard-card-border, var(--app-border)));
  box-shadow: var(--dashboard-card-shadow, 0 8px 28px rgba(16, 24, 40, 0.045));
}

.website-stat-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--nm-radius-md, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.website-stat-card__icon .nm-icon,
.website-stat-card__icon svg {
  width: 20px;
  height: 20px;
}

.website-stat-card--total .website-stat-card__icon {
  background: var(--website-stat-total-soft);
  color: var(--website-stat-total);
}
.website-stat-card--online .website-stat-card__icon {
  background: var(--website-stat-online-soft);
  color: var(--website-stat-online);
}
.website-stat-card--warning .website-stat-card__icon {
  background: var(--website-stat-warning-soft);
  color: var(--website-stat-warning);
}
.website-stat-card--offline .website-stat-card__icon {
  background: var(--website-stat-offline-soft);
  color: var(--website-stat-offline);
}
.website-stat-card--maintenance .website-stat-card__icon {
  background: var(--website-stat-maintenance-soft);
  color: var(--website-stat-maintenance);
}

.website-stat-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.website-stat-card__label {
  font-size: 0.78rem;
  color: var(--app-text-muted, var(--nm-text-muted));
  font-weight: 500;
}

.website-stat-card__value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--app-text, var(--nm-text));
  letter-spacing: -0.02em;
}

.website-stat-card__meta {
  font-size: 0.75rem;
  color: var(--app-text-muted, var(--nm-text-muted));
}

.nm-websites-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--app-surface-bg, #fff);
  border: 1px solid var(--app-border);
  box-shadow: var(--dashboard-card-shadow, 0 8px 28px rgba(16, 24, 40, 0.045));
}

.nm-websites-toolbar__start,
.nm-websites-toolbar__end {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.nm-websites-page .nm-websites-toolbar__start {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
}

.nm-websites-page label.nm-websites-search {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  gap: 8px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--app-border);
  background: var(--app-surface-bg, #fff);
  font-size: 0.9rem;
  font-weight: 400;
  box-sizing: border-box;
}

.nm-websites-page .nm-websites-search input.nm-websites-search__input,
.nm-websites-page .nm-websites-search input.nm-websites-search__input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--app-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.nm-websites-search__icon {
  order: 2;
  display: inline-flex;
  color: var(--app-text-muted);
  flex-shrink: 0;
  line-height: 0;
}

.nm-websites-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--nm-radius-md, 8px);
  border: 0;
  background: var(--nm-brand);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

.nm-websites-add-btn:hover {
  filter: brightness(0.96);
  color: #fff !important;
}

.nm-websites-add-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
  flex-shrink: 0;
  color: #fff;
}

.nm-websites-add-btn__icon svg,
.nm-websites-add-btn__icon .nm-icon,
.nm-websites-add-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
  stroke: currentColor;
  fill: none;
  color: #fff;
}

.nm-websites-usage {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.nm-websites-toolbar-btn,
.nm-websites-toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--app-border);
  background: var(--app-surface-bg, #fff);
  color: var(--app-text-muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: not-allowed;
  opacity: 0.72;
}

.nm-websites-toolbar-icon-btn {
  width: 42px;
  padding: 0;
  justify-content: center;
}

.nm-websites-toolbar-btn svg,
.nm-websites-toolbar-icon-btn svg {
  width: 16px;
  height: 16px;
}

.nm-websites-page > .nm-page-header,
.nm-websites-page > .website-stats-grid,
.nm-websites-page > .nm-websites-toolbar,
.nm-websites-page > .nm-websites-table-card {
  flex: 0 0 auto;
}

.nm-websites-table-card {
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--app-surface-bg, #fff);
  border: 1px solid var(--app-border);
  box-shadow: var(--dashboard-card-shadow, 0 8px 28px rgba(16, 24, 40, 0.045));
  overflow: visible;
  max-height: none;
  min-width: 0;
  width: 100%;
}

.nm-websites-empty {
  padding: 2.5rem 1.5rem;
}

.nm-websites-table-wrap {
  width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.nm-websites-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.nm-websites-table thead th {
  height: 42px;
  padding: 0 14px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--table-header-text, #475467);
  background: var(--table-header-bg, #f8fafc);
  border-bottom: 1px solid var(--table-border, var(--app-border));
  white-space: nowrap;
}

.nm-websites-table tbody td {
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--table-border, var(--app-border));
  color: var(--app-text);
  font-size: 0.9rem;
  vertical-align: middle;
}

.nm-websites-table tbody tr:last-child td {
  border-bottom: 0;
}

.nm-websites-table tbody tr.clickable-row:hover td {
  background: #fafbfc;
}

html[data-theme="dark"] .nm-websites-table tbody tr.clickable-row:hover td {
  background: #172235;
}

.nm-websites-table tbody tr.inactive-website td {
  opacity: 0.7;
}

.nm-websites-name {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nm-websites-table .site-favicon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--nm-surface-sunken, #eef0f3);
}

.nm-websites-name__text {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm-websites-domain {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 220px;
  color: var(--app-text-muted);
  text-decoration: none;
}

.nm-websites-domain:hover {
  color: var(--nm-brand);
}

.nm-websites-domain__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-websites-domain__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: 0.7;
  color: var(--app-text-muted);
  line-height: 0;
}

.nm-websites-page .nm-websites-domain__icon svg,
.nm-websites-page .nm-websites-domain__icon .nm-icon {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  display: block;
}

.nm-websites-domain:hover .nm-websites-domain__icon {
  color: var(--nm-brand);
  opacity: 1;
}

.nm-websites-status {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0.45rem;
  min-height: auto;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-self: auto !important;
}

.nm-websites-status.status-online,
.nm-websites-status.status-offline {
  background: transparent !important;
}

.nm-websites-table th:nth-child(3),
.nm-websites-table td:nth-child(3),
.nm-websites-table th:nth-child(4),
.nm-websites-table td:nth-child(4) {
  width: auto;
  max-width: none;
  min-width: 0;
  text-align: left;
}

.nm-websites-table .site-favicon {
  margin-right: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.nm-websites-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-unknown, #98a2b3);
  flex-shrink: 0;
}

.nm-websites-status.status-online .nm-websites-status__dot {
  background: var(--status-online, #32c875);
}
.nm-websites-status.status-offline .nm-websites-status__dot {
  background: var(--status-offline, var(--nm-brand));
}

.nm-websites-status.status-pending .nm-websites-status__label:empty::after {
  content: "";
  display: inline-block;
  width: 4.5rem;
  height: 0.65rem;
  border-radius: 4px;
  background: var(--app-border, #e5e7eb);
  vertical-align: middle;
  animation: nm-websites-status-pulse 1.1s ease-in-out infinite;
}

@keyframes nm-websites-status-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}

.nm-websites-status__label {
  font-size: 0.86rem;
  color: var(--app-text);
}

.nm-websites-muted {
  color: var(--app-text-muted);
}

.nm-websites-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: flex-end;
}

.nm-websites-action-btn svg,
.nm-websites-action-btn .nm-icon {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

.nm-websites-backup {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--app-text);
}

.nm-websites-backup__ok {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--status-online, #32c875);
}

.nm-websites-backup__ok svg {
  width: 14px !important;
  height: 14px !important;
  display: block;
}

.nm-websites-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--nm-radius-md, 8px);
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  text-decoration: none;
}

.nm-websites-action-btn:hover {
  background: color-mix(in srgb, var(--app-text-muted) 12%, transparent);
  color: var(--app-text);
}

.nm-websites-action-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.nm-websites-more {
  position: relative;
}

.nm-websites-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  padding: 0.4rem;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--app-border);
  background: var(--app-surface-bg, #fff);
  box-shadow: var(--nm-shadow-md);
  z-index: 20;
}

.nm-websites-more__menu a,
.nm-websites-more__menu button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nm-websites-more__menu a:hover,
.nm-websites-more__menu button:hover {
  background: color-mix(in srgb, var(--app-text-muted) 10%, transparent);
}

.nm-websites-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--table-border, var(--app-border));
}

.nm-websites-pagination__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.nm-websites-pagination__info {
  margin: 0;
  font-size: 0.84rem;
  color: var(--app-text-muted);
}

.nm-websites-page-size {
  width: auto !important;
  min-width: 118px;
  height: 34px !important;
  margin: 0;
  padding: 0 32px 0 10px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--app-border);
  background-color: var(--app-surface-bg, #fff);
  color: var(--app-text);
  font: inherit;
  font-size: 0.84rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}

.nm-websites-page-size:focus {
  outline: none;
  border-color: var(--nm-brand, #7c5cfc);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--nm-brand, #7c5cfc) 22%, transparent);
}

html[data-theme="dark"] .nm-websites-page-size {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa7b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.nm-websites-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nm-websites-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 0.55rem;
  border-radius: var(--nm-radius-pill, 999px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.nm-websites-page-btn.is-active {
  background: var(--nm-brand);
  color: #fff;
}

.nm-websites-page-btn.is-disabled,
.nm-websites-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.nm-websites-page-ellipsis {
  color: var(--app-text-muted);
  padding: 0 0.2rem;
}

html[data-theme="dark"] .nm-websites-toolbar,
html[data-theme="dark"] .nm-websites-table-card,
html[data-theme="dark"] .website-stat-card {
  box-shadow: none;
}

@media (max-width: 1279px) {
  .website-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .nm-websites-page {
    padding: 20px 16px 28px;
    gap: 18px;
  }
  .website-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nm-websites-table .col-wp,
  .nm-websites-table .col-php,
  .nm-websites-table .col-backup,
  .nm-websites-table th:nth-child(4),
  .nm-websites-table th:nth-child(5),
  .nm-websites-table th:nth-child(6) {
    display: none;
  }
  .nm-websites-table {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .website-stats-grid {
    grid-template-columns: 1fr;
  }
  .nm-websites-page .nm-websites-toolbar__start {
    flex-wrap: wrap;
    width: 100%;
  }
  .nm-websites-page label.nm-websites-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .nm-websites-toolbar__end {
    width: 100%;
    flex-wrap: wrap;
  }
  .nm-websites-table .col-domain,
  .nm-websites-table th:nth-child(2) {
    display: none;
  }
}

/* =========================================================
   Website Detail Page — SaaS redesign
   ========================================================= */

.nm-site-detail-page {
  --website-detail-bg: #f6f8fc;
  --website-detail-card-bg: #ffffff;
  --website-detail-card-border: #e7ecf3;
  --website-detail-text: #182230;
  --website-detail-muted: #667085;
  --website-detail-shadow: 0 8px 28px rgba(16, 24, 40, 0.045);
  --website-detail-ok: #32c875;
  --website-detail-warn: #f5a524;
  --website-detail-danger: #fc4f4f;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  float: none;
  gap: 18px;
  width: 100%;
  max-width: 3200px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  min-width: 0;
  align-content: flex-start;
  color: var(--website-detail-text);
}

html[data-theme="dark"] .nm-site-detail-page {
  --website-detail-bg: #0b1220;
  --website-detail-card-bg: #131d2b;
  --website-detail-card-border: #243349;
  --website-detail-text: #f8fafc;
  --website-detail-muted: #9aa7b7;
  --website-detail-shadow: none;
}

.nm-page-header__subtitle-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--website-detail-muted, var(--app-text-muted));
  text-decoration: none;
  font-weight: 500;
}

.nm-page-header__subtitle-link:hover {
  color: var(--nm-brand);
}

.nm-page-header__subtitle-icon {
  display: inline-flex;
  line-height: 0;
}

.nm-site-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nm-site-header-btn {
  height: 40px;
  gap: 0.4rem;
  border-radius: var(--nm-radius-md, 8px);
  padding: 0 12px;
}

.nm-site-header-btn svg,
.nm-site-header-btn .nm-icon {
  width: 16px;
  height: 16px;
}

.nm-site-actions-menu {
  position: relative;
}

.nm-site-actions-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px;
  border-radius: var(--nm-radius-md, 10px);
  border: 1px solid var(--website-detail-card-border, var(--app-border));
  background: var(--website-detail-card-bg, #fff);
  box-shadow: var(--website-detail-shadow);
  z-index: 40;
}

.nm-site-actions-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--website-detail-text, var(--app-text));
  padding: 10px 12px;
  border-radius: var(--nm-radius-md, 8px);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.nm-site-actions-item:hover {
  background: rgba(16, 24, 40, 0.05);
}

.nm-site-actions-item.is-danger {
  color: var(--website-detail-danger);
}

.nm-site-actions-item svg,
.nm-site-actions-item .nm-icon {
  width: 16px;
  height: 16px;
}

.nm-site-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  box-shadow: var(--website-detail-shadow);
}

.nm-site-hero__favicon {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1px solid var(--website-detail-card-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html[data-theme="dark"] .nm-site-hero__favicon {
  background: #0f1724;
}

.nm-site-hero__favicon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.nm-site-hero__favicon-fallback {
  color: var(--website-detail-muted);
  line-height: 0;
}

.nm-site-hero__favicon-fallback svg,
.nm-site-hero__favicon-fallback .nm-icon {
  width: 36px;
  height: 36px;
}

.nm-site-hero__metrics {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 16px;
  min-width: 0;
  align-items: center;
}

.nm-site-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: 4.25rem;
}

.nm-site-metric__label {
  font-size: 0.75rem;
  color: var(--website-detail-muted);
  font-weight: 500;
}

.nm-site-metric__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--website-detail-text);
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.nm-site-metric__sub,
.nm-site-metric__action {
  font-size: 0.8rem;
  color: var(--website-detail-muted);
  line-height: 1.35;
}

.nm-site-metric__sub.is-ok {
  color: var(--website-detail-ok);
}

.nm-site-metric__sub.is-warn {
  color: var(--website-detail-warn);
}

.nm-site-metric__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--nm-brand);
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  width: fit-content;
}

.nm-site-metric__action svg,
.nm-site-metric__action .nm-icon {
  width: 14px;
  height: 14px;
}

.nm-site-metric__status {
  white-space: normal;
  overflow: visible;
}

.nm-site-status-indicator {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--website-detail-text);
  overflow: visible;
}

.nm-site-status-indicator.status-online,
.nm-site-status-indicator.status-offline {
  background: transparent !important;
}

.nm-site-status-label {
  display: inline;
  line-height: 1.35;
}

.nm-site-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--website-detail-muted);
  flex-shrink: 0;
}

.nm-site-status-indicator.status-online .nm-site-status-dot {
  background: var(--website-detail-ok);
}

.nm-site-status-indicator.status-offline .nm-site-status-dot {
  background: var(--website-detail-danger);
}

.nm-site-inline-update {
  color: var(--nm-brand) !important;
  font-weight: 600;
  padding: 0;
}

.nm-site-tabs.nm-tabs {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  box-shadow: none;
  padding: 0 8px;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 20;
}

.nm-site-detail-page .nm-site-tabs .tablinks {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--website-detail-muted);
  font-weight: 500;
  box-shadow: none;
  border-bottom: 2px solid transparent;
}

.nm-site-detail-page .nm-site-tabs .tablinks svg,
.nm-site-detail-page .nm-site-tabs .tablinks .nm-icon {
  width: 16px;
  height: 16px;
}

.nm-site-detail-page .nm-site-tabs .tablinks.active,
.nm-site-detail-page .nm-site-tabs .tablinks[aria-selected="true"] {
  color: var(--nm-brand);
  background: transparent;
  border-bottom-color: var(--nm-brand);
  font-weight: 600;
}

.nm-site-tabpanel {
  display: none;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.website-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.nm-site-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  box-shadow: var(--website-detail-shadow);
  min-height: 0;
}

.nm-site-card--flush {
  box-shadow: none;
}

.nm-site-card__title,
.nm-site-tab-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--website-detail-text);
}

.nm-site-card__footer-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  border-radius: var(--nm-radius-md, 8px);
}

.nm-site-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nm-site-checklist li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.nm-site-checklist__label {
  color: var(--website-detail-muted);
  font-size: 0.88rem;
}

.nm-site-checklist__value {
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
  color: var(--website-detail-text);
}

.nm-site-checklist__value.is-ok,
.nm-site-activity__ok {
  color: var(--website-detail-ok);
}

.nm-site-checklist__value.is-warn {
  color: var(--website-detail-warn);
}

.nm-site-checklist__value.is-danger {
  color: var(--website-detail-danger);
}

.nm-site-checklist__value.is-muted {
  color: var(--website-detail-muted);
}

.nm-site-backup-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nm-site-backup-summary__icon {
  color: var(--website-detail-ok);
  line-height: 0;
}

.nm-site-backup-summary__icon svg,
.nm-site-backup-summary__icon .nm-icon {
  width: 36px;
  height: 36px;
}

.nm-site-backup-summary__time {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.nm-site-backup-summary__status {
  margin: 0.15rem 0 0;
  color: var(--website-detail-ok);
  font-weight: 600;
  font-size: 0.88rem;
}

.nm-site-backup-summary__hint {
  margin: 0.35rem 0 0;
  color: var(--website-detail-muted);
  font-size: 0.82rem;
}

.nm-site-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nm-site-activity__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: start;
  font-size: 0.82rem;
}

.nm-site-activity__when {
  color: var(--website-detail-muted);
}

.nm-site-activity__desc {
  color: var(--website-detail-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm-site-activity__empty {
  color: var(--website-detail-muted);
  font-size: 0.88rem;
}

.nm-site-tab-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
}

.nm-site-search {
  display: inline-flex;
  align-items: center;
  height: 40px;
  min-width: 220px;
  padding: 0 12px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  margin: 0;
  font-weight: 400;
  flex-direction: row !important;
}

.nm-site-detail-page .nm-site-search input.nm-site-search__input,
.nm-site-detail-page .nm-site-search input.nm-site-search__input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

.nm-site-filter {
  height: 40px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  color: var(--website-detail-text);
  padding: 0 10px;
}

.nm-site-preloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 28px 16px;
  color: var(--website-detail-muted);
}

.nm-site-table-wrap {
  flex: 0 0 auto;
  max-height: none;
  border-radius: var(--nm-radius-xl, 14px);
  border: 1px solid var(--website-detail-card-border);
  background: var(--website-detail-card-bg);
  box-shadow: var(--website-detail-shadow);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.nm-site-detail-page .nm-site-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.nm-site-detail-page .nm-site-table thead th {
  background: transparent;
  color: var(--website-detail-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--website-detail-card-border);
}

.nm-site-detail-page .nm-site-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--website-detail-card-border);
  color: var(--website-detail-text);
  vertical-align: middle;
}

.nm-site-detail-page .nm-site-table tbody tr:last-child td {
  border-bottom: 0;
}

.nm-site-infos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.nm-site-detail-page .website-info-box h6 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.nm-site-detail-page #logTableContainer table {
  width: 100%;
}

.nm-site-detail-page #logTableContainer thead th {
  background: transparent;
  color: var(--website-detail-muted);
}

@media (max-width: 1199px) {
  .nm-site-hero__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .website-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nm-site-infos-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 799px) {
  .nm-site-hero {
    flex-direction: column;
  }
  .nm-site-hero__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .website-overview-grid,
  .nm-site-infos-grid {
    grid-template-columns: 1fr;
  }
  .nm-site-activity__item {
    grid-template-columns: 1fr;
  }
  .nm-site-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .nm-site-header-actions > .nm-btn,
  .nm-site-actions-menu {
    flex: 1 1 auto;
  }
  .nm-site-actions-menu .nm-site-header-btn {
    width: 100%;
  }
}

/* --- Website Detail: bugfix overrides (tabs, dividers, toolbars, tables) --- */

.nm-site-detail-page {
  --website-meta-divider: #e7ecf3;
  --website-tab-text: #475467;
  --website-tab-hover: #182230;
  --website-tab-active: #fc4f4f;
  --website-tab-active-line: #fc4f4f;
  --backup-success: #32c875;
  --backup-success-soft: #eafaf1;
  --backup-error: #fc4f4f;
  --backup-progress: #3b82f6;
  --backup-empty: #98a2b3;
  --detail-table-bg: #ffffff;
  --detail-table-header-bg: #f8fafc;
  --detail-table-border: #e7ecf3;
  --detail-table-text: #182230;
  --detail-table-muted: #667085;
  --detail-table-hover: #fafbfc;
  --detail-toolbar-bg: #ffffff;
  --detail-toolbar-border: #e7ecf3;
}

html[data-theme="dark"] .nm-site-detail-page {
  --website-meta-divider: #243349;
  --website-tab-text: #9aa7b7;
  --website-tab-hover: #f8fafc;
  --website-tab-active: #ff6b6b;
  --website-tab-active-line: #ff6b6b;
  --backup-success-soft: rgba(50, 200, 117, 0.14);
  --detail-table-bg: #131d2b;
  --detail-table-header-bg: #111c2b;
  --detail-table-border: #243349;
  --detail-table-text: #f8fafc;
  --detail-table-muted: #9aa7b7;
  --detail-table-hover: #172235;
  --detail-toolbar-bg: #131d2b;
  --detail-toolbar-border: #243349;
}

.nm-site-detail-page .tabcontent,
.nm-site-detail-page .nm-site-tabpanel {
  align-items: stretch !important;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.nm-site-detail-page .tabs-ctn,
.nm-site-detail-page .themes-table,
.nm-site-detail-page .benutzer-table,
.nm-site-detail-page .backups-table {
  display: contents;
}

.nm-site-detail-page .tabcontent[hidden],
.nm-site-detail-page [role="tabpanel"][hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .nm-site-detail-page {
    padding: 16px 14px 24px;
  }

  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks {
    padding: 0 12px;
    min-width: 44px;
    justify-content: center;
  }

  .nm-site-detail-page
    .nm-site-tabs.nm-tabs
    .tablinks
    > span:not([aria-hidden]) {
    display: none !important;
  }

  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks,
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks span,
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks svg,
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks .nm-icon {
    color: var(--website-tab-text, #475467) !important;
    stroke: currentColor !important;
  }

  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active,
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks[aria-selected="true"],
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active span,
  .nm-site-detail-page
    .nm-site-tabs.nm-tabs
    .tablinks[aria-selected="true"]
    span,
  .nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active svg,
  .nm-site-detail-page
    .nm-site-tabs.nm-tabs
    .tablinks[aria-selected="true"]
    svg {
    color: var(--website-tab-active, var(--nm-brand)) !important;
    stroke: currentColor !important;
    background: transparent !important;
  }
}

.nm-site-hero__metrics .nm-site-metric + .nm-site-metric {
  border-left: 1px solid var(--website-meta-divider);
  padding-left: 20px;
  margin-left: 4px;
}

.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks {
  color: var(--website-tab-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 500;
}

.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks span,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks svg,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks .nm-icon {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks:hover {
  color: var(--website-tab-hover) !important;
}

.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks[aria-selected="true"],
.nm-site-detail-page .tab.nm-site-tabs button.tablinks.active,
.nm-site-detail-page .tab.nm-site-tabs button.tablinks[aria-selected="true"] {
  color: var(--website-tab-active) !important;
  background: transparent !important;
  border-bottom-color: var(--website-tab-active-line) !important;
  font-weight: 600 !important;
}

.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active span,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks[aria-selected="true"] span,
.nm-site-detail-page .tab.nm-site-tabs button.tablinks.active span,
.nm-site-detail-page
  .tab.nm-site-tabs
  button.tablinks[aria-selected="true"]
  span,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks.active svg,
.nm-site-detail-page .nm-site-tabs.nm-tabs .tablinks[aria-selected="true"] svg {
  color: var(--website-tab-active) !important;
  stroke: currentColor !important;
}

.nm-site-backup-summary__icon {
  color: var(--backup-empty);
}

.nm-site-backup-summary__icon.is-success,
.nm-site-card.is-backup-success .nm-site-backup-summary__icon {
  color: var(--backup-success) !important;
}

.nm-site-backup-summary__icon.is-empty,
.nm-site-card.is-backup-empty .nm-site-backup-summary__icon {
  color: var(--backup-empty) !important;
}

.nm-site-backup-summary__icon.is-error,
.nm-site-card.is-backup-error .nm-site-backup-summary__icon {
  color: var(--backup-error) !important;
}

.nm-site-detail-page .nm-site-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--nm-radius-xl, 14px) 14px 0 0;
  border: 1px solid var(--detail-toolbar-border);
  border-bottom: 0;
  background: var(--detail-toolbar-bg);
  margin: 0;
}

.nm-site-detail-page .nm-site-tab-toolbar + .nm-site-table-wrap,
.nm-site-detail-page
  .nm-site-tab-toolbar
  + .nm-site-preloader
  + .nm-site-table-wrap,
.nm-site-detail-page .nm-site-preloader + .nm-site-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nm-site-toolbar-left,
.nm-site-toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.nm-site-toolbar-right {
  margin-left: auto;
}

.nm-site-detail-page .nm-site-table-wrap {
  flex: 0 0 auto;
  width: 100%;
  max-height: none;
  border: 1px solid var(--detail-table-border);
  border-radius: var(--nm-radius-xl, 14px);
  overflow-x: auto;
  overflow-y: visible;
  background: var(--detail-table-bg);
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
}

.nm-site-detail-page .nm-site-table thead th {
  background: var(--detail-table-header-bg) !important;
  color: var(--detail-table-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--detail-table-border);
}

.nm-site-detail-page .nm-site-table tbody td {
  color: var(--detail-table-text);
  height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--detail-table-border);
}

.nm-site-detail-page .nm-site-table tbody tr:hover td {
  background: var(--detail-table-hover);
}

.nm-site-detail-page .nm-site-table tbody tr:last-child td {
  border-bottom: 0;
}

.nm-site-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--detail-table-border);
  background: transparent;
  color: var(--detail-table-muted);
  cursor: pointer;
}

.nm-site-icon-btn:hover {
  color: var(--nm-brand);
  border-color: currentColor;
}

.nm-site-log-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(102, 112, 133, 0.12);
  color: var(--detail-table-muted);
}

.nm-site-log-badge.is-plugin {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}
.nm-site-log-badge.is-theme {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}
.nm-site-log-badge.is-core {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.12);
}
.nm-site-log-badge.is-backup {
  color: #15803d;
  background: rgba(21, 128, 61, 0.12);
}
.nm-site-log-badge.is-comment {
  color: #c2410c;
  background: rgba(194, 65, 12, 0.12);
}
.nm-site-log-badge.is-user {
  color: #334155;
  background: rgba(51, 65, 85, 0.12);
}

.nm-site-inline-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 0.25rem;
  color: var(--detail-table-text);
}

.nm-site-inline-error p {
  margin: 0;
  color: var(--detail-table-muted);
}

.nm-site-empty,
.nm-site-logs-error {
  padding: 1.25rem;
  color: var(--detail-table-muted);
  border: 1px solid var(--detail-table-border);
  border-radius: var(--nm-radius-xl, 14px);
  background: var(--detail-table-bg);
}

.nm-site-detail-page #logTableContainer {
  width: 100%;
}

.nm-site-detail-page .plugin-status-current {
  color: var(--backup-success);
  font-weight: 600;
}

@media (max-width: 1199px) {
  .nm-site-hero__metrics .nm-site-metric + .nm-site-metric {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .nm-site-hero__metrics .nm-site-metric:nth-child(3n + 2),
  .nm-site-hero__metrics .nm-site-metric:nth-child(3n + 3) {
    border-left: 1px solid var(--website-meta-divider);
    padding-left: 16px;
  }
}

@media (max-width: 799px) {
  .nm-site-hero__metrics .nm-site-metric + .nm-site-metric,
  .nm-site-hero__metrics .nm-site-metric:nth-child(3n + 2),
  .nm-site-hero__metrics .nm-site-metric:nth-child(3n + 3) {
    border-left: 0;
    padding-left: 0;
  }
  .nm-site-hero__metrics .nm-site-metric:nth-child(2n) {
    border-left: 1px solid var(--website-meta-divider);
    padding-left: 14px;
  }
}

.nm-site-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nm-site-role-badge {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: var(--nm-radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(102, 112, 133, 0.12);
  color: var(--detail-table-muted, var(--app-text-muted));
  text-transform: capitalize;
}

/* Nutzerverwaltung: Modulzugriff-Toggles */
.nm-module-access {
  margin: 1rem 0 0.5rem;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.nm-module-access__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.nm-module-access__bypass-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--app-text-muted, #667085);
}

.nm-module-access__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nm-module-access__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.03);
}

.nm-module-access__row.is-plan-locked {
  opacity: 0.72;
}

.nm-module-access__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.nm-module-access__label {
  font-size: 0.9rem;
  font-weight: 500;
}

.nm-module-access__plan-hint {
  font-size: 0.75rem;
  color: var(--app-text-muted, #667085);
}

.nm-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.nm-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nm-switch__slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c5cbd6;
  transition: background 0.15s ease;
}

.nm-switch__slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}

.nm-switch__input:checked + .nm-switch__slider {
  background: var(--color-primary, #7c5cfc);
}

.nm-switch__input:checked + .nm-switch__slider::before {
  transform: translateX(18px);
}

.nm-switch__input:disabled + .nm-switch__slider {
  opacity: 0.55;
  cursor: not-allowed;
}

.nm-switch__input:focus-visible + .nm-switch__slider {
  outline: 2px solid var(--color-primary, #7c5cfc);
  outline-offset: 2px;
}

/* Account: E-Mail-Signatur Quill */
.mail-signature-quill-toolbar {
  border: 1px solid var(--border-color, #e2e8f0);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--surface-secondary, #f8fafc);
}

.mail-signature-quill-toolbar .ql-align,
.mail-signature-quill-toolbar .ql-size,
.mail-signature-quill-toolbar .ql-color {
  width: auto;
}

.mail-signature-quill-editor {
  min-height: 180px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0 0 8px 8px;
  background: var(--surface, #fff);
}

.mail-signature-quill-editor .ql-editor {
  min-height: 160px;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}

.mail-signature-quill-editor .ql-editor img,
.akquise-mail-preview-signature img {
  display: inline-block;
  max-width: 200px;
  width: auto;
  height: auto;
  vertical-align: middle;
  object-fit: contain;
}

#mail-preferences .mail-signature-quill-editor.ql-container {
  font-family: inherit;
}

/* WP-Management Phase 6 – Freshness UI */
.nm-wp-freshness {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  max-width: 100%;
}
.nm-wp-freshness__pill {
  font-size: 0.72rem;
  padding: 0.12rem 0.5rem;
}
.nm-wp-freshness__time {
  font-size: 0.78rem;
  color: var(--app-text-muted, var(--nm-text-muted, #667085));
  line-height: 1.3;
}
.nm-wp-freshness-meta {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--app-text-muted, var(--nm-text-muted, #667085));
  line-height: 1.35;
}
.nm-dash-update-list .nm-wp-freshness-meta {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--app-text-muted, var(--nm-text-muted, #667085));
  line-height: 1.35;
}
.nm-btn.is-syncing {
  opacity: 0.75;
}
.nm-websites-status.status-stale .nm-websites-status__dot,
.nm-websites-status.status-warning .nm-websites-status__dot {
  background: var(--nm-warning, #f0b429);
}
.nm-websites-status.status-unknown .nm-websites-status__dot,
.nm-websites-status.status-syncing .nm-websites-status__dot {
  background: var(--status-unknown, #98a2b3);
}
.nm-websites-status.status-auth .nm-websites-status__dot,
.nm-websites-status.status-connector .nm-websites-status__dot {
  background: var(--status-offline, var(--nm-brand));
}
.nm-websites-status__meta {
  display: block;
  font-size: 0.72rem;
  color: var(--app-text-muted, #667085);
  margin-top: 0.15rem;
}
.nm-websites-freshness-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
.nm-site-inv-freshness,
.nm-site-lw-freshness {
  margin-top: 0.35rem;
}
.nm-site-inventory-banner {
  font-size: 0.82rem;
  color: var(--app-text-muted, #667085);
  margin: 0.5rem 0;
}
.nm-site-empty-cell {
  text-align: center;
  color: var(--app-text-muted, #667085);
  padding: 1.25rem 0.75rem !important;
}
.nm-site-empty-cell .nm-inventory-load-btn {
  margin-left: 0.5rem;
  vertical-align: middle;
}
.nm-site-status-indicator.status-stale .nm-site-status-dot {
  background: var(--nm-warning, #f0b429);
}
.nm-site-status-indicator.status-unknown .nm-site-status-dot,
.nm-site-status-indicator.status-syncing .nm-site-status-dot {
  background: var(--status-unknown, #98a2b3);
}
@media (max-width: 720px) {
  .nm-wp-freshness {
    gap: 0.25rem;
  }
}

/* ==========================================================================
   CRM Recherche – Area Map Verwaltung (Gebiete only)
   ========================================================================== */
section.nm-crm-research-page,
.nm-crm-research-page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 32px 24px;
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(100vh - 6.5rem);
  overflow-x: hidden;
}
.nm-crm-research-page [hidden] {
  display: none !important;
}
.nm-crm-research-page > .nm-page-header {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 0;
}
.nm-crm-research-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  flex: 0 0 auto;
  width: 100%;
  padding: 0.65rem 0.75rem;
  box-sizing: border-box;
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #e4e7ec);
  border-radius: var(--radius-lg, 12px);
}
.nm-crm-research-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}
.nm-crm-research-toolbar__coords {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
  position: relative;
  margin: 0;
}
.nm-crm-research-coord-search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.nm-crm-research-coord-search input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #d0d5dd);
  border-radius: var(--radius-md, 8px);
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  line-height: 1.3;
  background: var(--surface, #fff);
  color: var(--app-text, #101828);
}
.nm-crm-research-coord-search input:focus-visible {
  outline: 2px solid var(--color-primary-300, #bdb4fe);
  outline-offset: 1px;
  border-color: var(--color-primary-300, #bdb4fe);
}
.nm-crm-research-coord-error {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-danger-700, #b42318);
  line-height: 1.3;
}
.nm-crm-research-coord-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-600, #6b46f2);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35);
  pointer-events: none;
}
.nm-crm-research-toolbar__sep {
  display: inline-block;
  width: 1px;
  height: 1.35rem;
  background: var(--border-color, #e4e7ec);
  margin: 0 0.15rem;
  flex: 0 0 auto;
}
.nm-crm-research-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}
.nm-crm-research-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
}
.nm-crm-research-chip {
  appearance: none;
  border: 1px solid var(--border-color, #d0d5dd);
  background: var(--surface, #fff);
  color: var(--app-text, #101828);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.nm-crm-research-chip:hover,
.nm-crm-research-chip:focus-visible {
  border-color: var(--color-primary-300, #bdb4fe);
  outline: none;
}
.nm-crm-research-chip.is-active,
.nm-crm-research-chip--mine.is-active,
#crmResearchMineOnly.is-active {
  background: var(--color-primary-50, #f5f3ff);
  border-color: var(--color-primary-300, #bdb4fe);
  color: var(--color-primary-700, #5925dc);
}
.nm-crm-research-page > .nm-crm-research-toolbar {
  margin: 0.75rem 0 0.65rem;
}
.nm-crm-research-page > .nm-crm-research-draw-bar {
  margin-bottom: 0.65rem;
}

.nm-crm-research-workspace {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
  min-height: max(28rem, calc(100vh - 15rem));
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border-color, #e4e7ec);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--surface-muted, #f2f4f7);
  position: relative;
}

/* Nicht als <aside> markieren: globale Nav-Regel `aside { position:fixed; left:0; z-index:200 }`
   würde die Gebietsleiste unter die App-Nav schieben. Zusätzlich: aside.nm-crm-research-aside als Schutz. */
.nm-crm-research-aside,
aside.nm-crm-research-aside {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  grid-area: auto !important;
  background: var(--surface, #fff);
  color: var(--app-text, #101828);
  border-right: 1px solid var(--border-color, #e4e7ec);
  border-left: 0;
  overflow: hidden;
  overscroll-behavior: auto;
  z-index: 1 !important;
  transition:
    width 0.22s ease,
    flex-basis 0.22s ease;
  box-sizing: border-box;
}

.nm-crm-research-aside__rail {
  display: none;
  flex: 0 0 44px;
  width: 44px;
  align-items: stretch;
  justify-content: center;
  background: var(--surface, #fff);
}

.nm-crm-research-aside.is-collapsed,
.nm-crm-research-workspace.is-aside-collapsed .nm-crm-research-aside {
  flex-basis: 44px;
  width: 44px;
}

.nm-crm-research-aside.is-collapsed .nm-crm-research-aside__panel,
.nm-crm-research-workspace.is-aside-collapsed .nm-crm-research-aside__panel {
  display: none;
}

.nm-crm-research-aside.is-collapsed .nm-crm-research-aside__rail,
.nm-crm-research-workspace.is-aside-collapsed .nm-crm-research-aside__rail {
  display: flex;
}

.nm-crm-research-aside__expand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.85rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--app-text-muted, #667085);
  cursor: pointer;
  font: inherit;
}

.nm-crm-research-aside__expand:hover,
.nm-crm-research-aside__expand:focus-visible {
  color: var(--color-primary, #7c5cfc);
  background: color-mix(in srgb, var(--color-primary, #7c5cfc) 8%, transparent);
}

.nm-crm-research-aside__expand-icon {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 0.15rem;
}

.nm-crm-research-aside__expand-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nm-crm-research-aside__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

.nm-crm-research-aside__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.65rem;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-color, #e4e7ec);
}

.nm-crm-research-aside__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text, #101828);
  line-height: 1.25;
}

.nm-crm-research-aside__count {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--app-text-muted, #667085);
}

.nm-crm-research-aside__collapse {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e4e7ec);
  background: var(--surface, #fff);
  color: var(--app-text-muted, #667085);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.nm-crm-research-aside__collapse:hover,
.nm-crm-research-aside__collapse:focus-visible {
  border-color: var(--color-primary, #7c5cfc);
  color: var(--color-primary, #7c5cfc);
}

.nm-crm-research-aside__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-color, #e4e7ec);
}

.nm-crm-research-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e4e7ec);
  background: var(--surface-muted, #f8fafc);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.nm-crm-research-kpi:hover,
.nm-crm-research-kpi:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary, #7c5cfc) 45%, #e4e7ec);
}

.nm-crm-research-kpi.is-active {
  border-color: var(--color-primary, #7c5cfc);
  background: color-mix(in srgb, var(--color-primary, #7c5cfc) 10%, #fff);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--color-primary, #7c5cfc) 35%, transparent);
}

.nm-crm-research-kpi__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--app-text-muted, #667085);
  line-height: 1.2;
}

.nm-crm-research-kpi__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-text, #101828);
  line-height: 1.2;
}

.nm-crm-research-kpi__skeleton {
  display: none;
  width: 100%;
}

.nm-crm-research-kpi__skeleton-value {
  width: 2.35rem;
  max-width: 48%;
  height: 1.05rem;
  margin: 0.1rem 0 0;
}

.nm-crm-research-aside__kpis[data-areas-state="loading"] .nm-crm-research-kpi {
  pointer-events: none;
  cursor: default;
}

.nm-crm-research-aside__kpis[data-areas-state="loading"] .nm-crm-research-kpi__value {
  display: none;
}

.nm-crm-research-aside__kpis[data-areas-state="loading"] .nm-crm-research-kpi__skeleton {
  display: block;
}

.nm-crm-research-aside__kpis[data-areas-state="ready"] .nm-crm-research-kpi__skeleton {
  display: none;
}

.nm-crm-research-aside__tools {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-color, #e4e7ec);
}

.nm-crm-research-aside__search input,
.nm-crm-research-aside__sort select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #e4e7ec);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.86rem;
  background: var(--surface, #fff);
  color: var(--app-text, #101828);
}

.nm-crm-research-aside__search input:focus,
.nm-crm-research-aside__sort select:focus {
  outline: 2px solid
    color-mix(in srgb, var(--color-primary, #7c5cfc) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--color-primary, #7c5cfc);
}

.nm-crm-research-aside .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nm-crm-research-aside__list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.nm-crm-research-area-list {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.65rem 0.85rem;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nm-crm-research-area-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem 0.5rem;
  border: 1px solid var(--border-color, #e4e7ec);
  border-radius: 10px;
  background: var(--surface, #fff);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.nm-crm-research-area-card--skeleton {
  pointer-events: none;
  min-height: 5.25rem;
  justify-content: center;
}

.nm-crm-research-area-card--skeleton:hover {
  border-color: var(--border-color, #e4e7ec);
}

.nm-crm-research-area-card__skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.nm-crm-research-area-card__skeleton .nm-skeleton--line {
  margin-bottom: 0;
}

.nm-crm-research-area-card__skeleton .nm-skeleton--line:nth-child(1) {
  width: 68%;
  height: 0.9rem;
}

.nm-crm-research-area-card__skeleton .nm-skeleton--line:nth-child(2) {
  width: 48%;
  height: 0.7rem;
}

.nm-crm-research-area-card__skeleton .nm-skeleton--line:nth-child(3) {
  width: 56%;
  height: 0.7rem;
}

.nm-crm-research-area-card:hover {
  border-color: color-mix(in srgb, var(--color-primary, #7c5cfc) 35%, #e4e7ec);
}

.nm-crm-research-area-card.is-selected {
  border-color: var(--color-primary, #7c5cfc);
  background: color-mix(in srgb, var(--color-primary, #7c5cfc) 7%, #fff);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--color-primary, #7c5cfc) 25%, transparent);
}

.nm-crm-research-area-card__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.nm-crm-research-area-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.nm-crm-research-area-card__name {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--app-text, #101828);
  line-height: 1.3;
  word-break: break-word;
}

.nm-crm-research-area-card__meta {
  font-size: 0.75rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.35;
}

.nm-crm-research-area-card__priority {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.nm-crm-research-area-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.nm-crm-research-area-card__actions .nm-btn {
  font-size: 0.75rem;
  padding: 0.28rem 0.55rem;
}

.nm-crm-research-area-card__delete {
  color: var(--color-danger, #fc5757) !important;
}

.nm-crm-research-status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}

.nm-crm-research-status-badge.is-open {
  color: #475569;
  background: color-mix(in srgb, #94a3b8 22%, #fff);
  border-color: color-mix(in srgb, #94a3b8 45%, #fff);
}

.nm-crm-research-status-badge.is-planned {
  color: #0369a1;
  background: color-mix(in srgb, #5ac8fa 22%, #fff);
  border-color: color-mix(in srgb, #5ac8fa 45%, #fff);
}

.nm-crm-research-status-badge.is-in_progress {
  color: #92400e;
  background: color-mix(in srgb, #f5a524 22%, #fff);
  border-color: color-mix(in srgb, #f5a524 45%, #fff);
}

.nm-crm-research-status-badge.is-completed {
  color: #166534;
  background: color-mix(in srgb, #22c55e 20%, #fff);
  border-color: color-mix(in srgb, #22c55e 40%, #fff);
}

.nm-crm-research-status-badge.is-needs_review {
  color: #b42318;
  background: color-mix(in srgb, #fc5757 18%, #fff);
  border-color: color-mix(in srgb, #fc5757 40%, #fff);
}

.nm-crm-research-aside-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--app-text-muted, #667085);
}

.nm-crm-research-aside-empty__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--app-text, #101828);
}

.nm-crm-research-aside-empty__text {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.nm-crm-research-map-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-muted, #f2f4f7);
  width: auto;
}

@media (max-width: 899px) {
  .nm-crm-research-workspace {
    display: block;
    min-height: max(24rem, calc(100vh - 14rem));
  }

  .nm-crm-research-aside,
  aside.nm-crm-research-aside {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    inset: 0 auto 0 0 !important;
    width: min(360px, 92vw);
    flex: none;
    flex-basis: auto;
    max-width: min(360px, 92vw);
    height: 100% !important;
    box-shadow: 8px 0 28px rgba(16, 24, 40, 0.14);
    z-index: 5 !important;
    transform: none !important;
  }

  .nm-crm-research-aside.is-collapsed,
  .nm-crm-research-workspace.is-aside-collapsed .nm-crm-research-aside {
    width: 44px;
    max-width: 44px;
    flex-basis: 44px;
    box-shadow: none;
  }

  .nm-crm-research-map-shell {
    width: 100%;
    min-height: inherit;
    height: 100%;
  }
}

.nm-crm-research-map {
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.nm-crm-research-map-empty,
.nm-crm-research-map-error,
.nm-crm-research-load-error {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0.85rem;
  transform: translateX(-50%);
  max-width: min(92%, 28rem);
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
  pointer-events: auto;
}
.nm-crm-research-map-empty {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-color, #e4e7ec);
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-map-error {
  background: #fffaf5;
  border: 1px solid var(--color-warning-300, #fec84b);
  color: var(--color-warning-800, #93370d);
}
.nm-crm-research-load-error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  background: #fffaf5;
  border: 1px solid var(--color-warning-300, #fec84b);
  color: var(--color-warning-800, #93370d);
}
.nm-crm-research-legend {
  position: absolute;
  z-index: 2;
  left: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-color, #e4e7ec);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  font-size: 0.72rem;
  color: var(--app-text, #101828);
  pointer-events: none;
}
.nm-crm-research-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.nm-crm-research-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  background: color-mix(in srgb, currentColor 35%, transparent);
  flex: 0 0 auto;
  font-style: normal;
}
.nm-crm-research-legend i[data-status="open"] {
  color: #94a3b8;
}
.nm-crm-research-legend i[data-status="planned"] {
  color: #5ac8fa;
}
.nm-crm-research-legend i[data-status="in_progress"] {
  color: #f5a524;
}
.nm-crm-research-legend i[data-status="completed"] {
  color: #22c55e;
}
.nm-crm-research-legend i[data-status="needs_review"] {
  color: #fc5757;
}
.nm-crm-research-draw-bar {
  position: static;
  z-index: auto;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #e4e7ec);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
}
.nm-crm-research-draw-bar__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
  flex: 1 1 12rem;
}
.nm-crm-research-draw-bar__copy strong,
.nm-crm-research-draw-bar__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--app-text, #101828);
}
.nm-crm-research-draw-bar__copy span,
.nm-crm-research-draw-bar__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-draw-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.nm-crm-research-assignee-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nm-crm-research-assignee-label {
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--crm-detail-text, var(--app-text, #101828));
}
.nm-crm-research-assignee-ms {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nm-crm-research-assignee-control {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, var(--border-color, #e4e7ec));
  background: var(--crm-detail-surface, var(--surface, #fff));
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.nm-crm-research-assignee-ms.is-open .nm-crm-research-assignee-control,
.nm-crm-research-assignee-control:focus-within {
  border-color: var(--nm-brand, var(--color-primary, #7c5cfc));
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--nm-brand, var(--color-primary, #7c5cfc)) 16%,
      transparent
    );
}
.nm-crm-research-assignee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0;
}
.nm-crm-research-assignee-chips:empty {
  display: none;
}
.nm-crm-research-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.18rem 0.4rem 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nm-brand, var(--color-primary, #7c5cfc)) 22%,
      transparent
    );
  background: color-mix(
    in srgb,
    var(--nm-brand, var(--color-primary, #7c5cfc)) 10%,
    #fff
  );
  color: var(--crm-detail-text, #101828);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.nm-crm-research-assignee-chip span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-crm-research-assignee-chip:hover {
  border-color: color-mix(
    in srgb,
    var(--nm-brand, var(--color-primary, #7c5cfc)) 40%,
    transparent
  );
}
.nm-crm-research-assignee-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.15rem 0.1rem;
  border: 0;
  background: transparent;
  color: var(--crm-detail-muted, var(--app-text-muted, #667085));
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.nm-crm-research-assignee-toggle:hover,
.nm-crm-research-assignee-toggle:focus {
  outline: none;
  color: var(--crm-detail-text, #101828);
}
.nm-crm-research-assignee-toggle__text {
  flex: 1;
  min-width: 0;
}
.nm-crm-research-assignee-toggle__chevron {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nm-crm-research-assignee-ms.is-open .nm-crm-research-assignee-toggle__chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}
.nm-crm-research-assignee-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.3rem);
  max-height: 13.5rem;
  overflow: auto;
  padding: 0.3rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid var(--crm-detail-border, var(--border-color, #e4e7ec));
  background: var(--crm-detail-surface, var(--surface, #fff));
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}
.nm-crm-research-assignee-list[hidden] {
  display: none !important;
}
.nm-crm-research-assignee-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--crm-detail-text, #101828);
  box-sizing: border-box;
  user-select: none;
}
.nm-crm-research-assignee-option:hover {
  background: color-mix(
    in srgb,
    var(--nm-brand, var(--color-primary, #7c5cfc)) 7%,
    transparent
  );
}
.nm-crm-research-assignee-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}
.nm-crm-research-assignee-option:has(input:checked) {
  background: color-mix(
    in srgb,
    var(--nm-brand, var(--color-primary, #7c5cfc)) 10%,
    transparent
  );
}
.nm-crm-research-assignee-option input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  appearance: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.nm-crm-research-assignee-option__box {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 1.5px solid var(--crm-detail-border, #d0d5dd);
  background: #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.nm-crm-research-assignee-option__box::after {
  content: "";
  width: 0.28rem;
  height: 0.5rem;
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(45deg) translateY(-0.05rem);
}
.nm-crm-research-assignee-option
  input:checked
  + .nm-crm-research-assignee-option__box {
  border-color: var(--nm-brand, var(--color-primary, #7c5cfc));
  background: var(--nm-brand, var(--color-primary, #7c5cfc));
}
.nm-crm-research-assignee-option
  input:checked
  + .nm-crm-research-assignee-option__box::after {
  border-color: #fff;
}
.nm-crm-research-assignee-option
  input:focus-visible
  + .nm-crm-research-assignee-option__box {
  outline: 2px solid var(--nm-brand, var(--color-primary, #7c5cfc));
  outline-offset: 2px;
}
.nm-crm-research-assignee-option__name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-crm-research-assignee-empty {
  margin: 0.5rem;
  font-size: 0.82rem;
  color: var(--crm-detail-muted, var(--app-text-muted, #667085));
}
.nm-field-hint {
  font-size: 0.75rem;
  color: var(--crm-detail-muted, var(--app-text-muted, #667085));
}
.nm-crm-research-field-loading {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-field-loading[hidden] {
  display: none !important;
}
.nm-crm-research-hover-assignees,
.nm-crm-research-hover-popup__assignees {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  opacity: 0.92;
  line-height: 1.35;
}
.nm-crm-research-meta-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-drawer-tools {
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border-subtle, #eaecf0);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.nm-crm-research-drawer-tools__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-drawer-tools__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nm-crm-research-drawer-tools__btn {
  width: 100%;
  justify-content: center;
}

.nm-crm-research-drawer-research {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1rem 0 0.25rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--border-subtle, #eaecf0);
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  background: transparent;
}
/* Drawer liegt außerhalb .nm-crm-research-page – display:flex überschreibt sonst [hidden] */
#crmResearchDrawer [hidden] {
  display: none !important;
}
.nm-crm-research-drawer-research__header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
}
.nm-crm-research-drawer-research__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-drawer-research__subline {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.nm-crm-research-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-subtle, #eaecf0);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--app-surface, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.nm-crm-research-tool-row:hover:not(:disabled),
.nm-crm-research-tool-row:focus-visible:not(:disabled) {
  border-color: var(--app-border, #d0d5dd);
  background: var(--nm-surface-sunken, rgba(0, 0, 0, 0.02));
  outline: none;
}
.nm-crm-research-tool-row:focus-visible {
  outline: 2px solid var(--nm-brand, #7c5cfc);
  outline-offset: 2px;
}
.nm-crm-research-tool-row:disabled {
  opacity: 0.55;
  cursor: default;
}
.nm-crm-research-tool-row__main {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
}
.nm-crm-research-tool-row__icon {
  display: inline-flex;
  color: var(--app-text-muted, #667085);
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.nm-crm-research-tool-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.nm-crm-research-tool-row__label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--app-text, #101828);
}
.nm-crm-research-tool-row__sub {
  font-size: 0.76rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.35;
}
.nm-crm-research-tool-row__chevron {
  display: inline-flex;
  color: var(--app-text-muted, #98a2b3);
  flex-shrink: 0;
}
.nm-crm-research-saved {
  margin-top: 0.35rem;
  width: 100%;
}
.nm-crm-research-saved__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.nm-crm-research-saved__head-main {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}
.nm-crm-research-saved__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text, #101828);
}
.nm-crm-research-saved__count {
  font-size: 0.74rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-saved__head .nm-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nm-crm-research-saved__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nm-crm-research-saved__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
}
.nm-crm-research-saved__item:last-child {
  border-bottom: 0;
}
.nm-crm-research-saved__name {
  display: block;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--app-text, #101828);
  word-break: break-word;
}
.nm-crm-research-saved__url {
  display: block;
  font-size: 0.74rem;
  color: var(--nm-brand, #7c5cfc);
  text-decoration: none;
  word-break: break-all;
}
.nm-crm-research-saved__url:hover,
.nm-crm-research-saved__url:focus-visible {
  text-decoration: underline;
}
.nm-crm-research-saved__actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}
.nm-crm-research-companies-list__icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}
/* Research uses canonical .nm-icon-btn (CRM-detail bordered variant scoped below). */
.nm-crm-research-companies-modal .nm-icon-btn,
.nm-crm-research-drawer-research .nm-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--app-border, #e4e7ec);
  border-radius: var(--nm-radius-md, 8px);
  background: var(--white, #fff);
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-modal .nm-icon-btn:hover:not(:disabled),
.nm-crm-research-drawer-research .nm-icon-btn:hover:not(:disabled) {
  background: var(--nm-surface-sunken, rgba(0, 0, 0, 0.04));
  color: var(--app-text, #344054);
  border-color: var(--app-border, #d0d5dd);
}
.nm-crm-research-companies-modal .nm-icon-btn:focus-visible,
.nm-crm-research-drawer-research .nm-icon-btn:focus-visible {
  outline: 2px solid var(--nm-brand, #7c5cfc);
  outline-offset: 2px;
}
.nm-crm-research-companies-modal .nm-icon-btn:disabled,
.nm-crm-research-companies-modal .nm-icon-btn.is-saved,
.nm-crm-research-drawer-research .nm-icon-btn:disabled,
.nm-crm-research-drawer-research .nm-icon-btn.is-saved {
  opacity: 0.55;
  cursor: default;
}
.nm-crm-research-companies-modal .nm-icon-btn--danger:hover:not(:disabled),
.nm-crm-research-companies-modal .nm-icon-btn--danger:focus-visible:not(:disabled),
.nm-crm-research-drawer-research .nm-icon-btn--danger:hover:not(:disabled),
.nm-crm-research-drawer-research .nm-icon-btn--danger:focus-visible:not(:disabled) {
  border-color: var(--color-danger-300, #fca5a5);
  color: var(--color-danger-600, #dc2626);
  background: var(--color-danger-50, #fef2f2);
}
.nm-crm-research-companies-modal .nm-icon-btn svg,
.nm-crm-research-drawer-research .nm-icon-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}
.nm-crm-research-saved__empty {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-saved__empty-hint {
  display: none;
}
.nm-crm-research-companies-list__edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-list__edit-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--app-border, #e4e7ec);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  color: var(--app-text, #101828);
  background: var(--white, #fff);
}
.nm-crm-research-companies-list__edit-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.nm-crm-research-companies-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.nm-crm-research-companies-list__hint,
.nm-crm-research-companies-list__resolve-status {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--app-text-muted, #667085);
  width: 100%;
}
.nm-crm-research-companies-list__website-missing {
  font-size: 0.82rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-saved__main {
  min-width: 0;
  flex: 1;
}
.nm-crm-research-streets-modal.modal-content,
.modal-content.nm-crm-research-streets-modal {
  max-width: min(820px, calc(100vw - 2rem));
  width: min(820px, calc(100vw - 2rem));
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  max-height: min(90vh, calc(100vh - 2rem));
}
.nm-crm-research-streets-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem 0.75rem;
  flex-shrink: 0;
  background: var(--white, #fff);
  z-index: 2;
}
.nm-crm-research-streets-modal__header-text {
  min-width: 0;
  flex: 1 1 auto;
}
.nm-crm-research-streets-modal__header-text h4 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: left;
}
.nm-crm-research-streets-modal__subtitle {
  margin: 0;
  font-size: 0.86rem;
  color: var(--app-text-muted, #667085);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.nm-crm-research-streets-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--app-text-muted, #667085);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.nm-crm-research-streets-modal__close:hover,
.nm-crm-research-streets-modal__close:focus-visible {
  background: var(--surface-muted, #f9fafb);
  color: var(--app-text, #101828);
  outline: none;
}
.nm-crm-research-streets-modal__summary {
  padding: 0 1.25rem 0.65rem;
  flex-shrink: 0;
  background: var(--white, #fff);
}
.nm-crm-research-streets-modal__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.nm-crm-research-streets-modal__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-streets-modal__percent {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text, #101828);
  white-space: nowrap;
}
.nm-crm-research-streets-modal__progress {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--surface-muted, #f2f4f7);
  overflow: hidden;
}
.nm-crm-research-streets-modal__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--color-success-500, #22c55e);
  transition: width 0.2s ease;
}
.nm-crm-research-streets-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0 1.25rem 0.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
  background: var(--white, #fff);
}
.nm-crm-research-streets-modal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.nm-crm-research-streets-modal__search {
  flex: 1 1 12rem;
  min-width: 10rem;
  margin: 0;
}
.nm-crm-research-streets-modal .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nm-crm-research-streets-modal__search input {
  width: 100%;
  margin: 0;
}
.nm-crm-research-streets-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.65rem 1.25rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}
.nm-crm-research-streets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}
.nm-crm-research-streets-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  line-height: 1.35;
  background: var(--surface-muted, #f9fafb);
  cursor: pointer;
  border: 1px solid transparent;
}
.nm-crm-research-streets-list__item:hover {
  border-color: var(--border-subtle, #eaecf0);
}
.nm-crm-research-streets-list__item.is-completed {
  background: color-mix(in srgb, var(--crm-status-success-bg, #eafaf1) 70%, #fff);
}
.nm-crm-research-streets-list__item.is-pending {
  opacity: 0.72;
  pointer-events: none;
}
.nm-crm-research-streets-list__check {
  margin: 0;
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.nm-crm-research-streets-list__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nm-crm-research-streets-list__name {
  font-weight: 500;
  color: var(--app-text, #101828);
  overflow-wrap: anywhere;
}
.nm-crm-research-streets-list__meta {
  font-size: 0.75rem;
  color: var(--app-text-muted, #667085);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-crm-research-streets-list__pill {
  flex-shrink: 0;
}
.nm-crm-research-streets-empty,
.nm-crm-research-streets-loading,
.nm-crm-research-streets-error {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
}
.nm-crm-research-streets-error {
  color: var(--color-danger-700, #b42318);
}
.nm-crm-research-streets-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border-subtle, #eaecf0);
  flex-shrink: 0;
  background: var(--white, #fff);
  width: 100%;
  box-sizing: border-box;
}
.nm-crm-research-streets-modal__actions-left,
.nm-crm-research-streets-modal__actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.nm-crm-research-streets-modal__actions-right {
  margin-left: auto;
}
.nm-crm-research-companies-modal.modal-content,
.modal-content.nm-crm-research-companies-modal {
  width: min(960px, calc(100vw - 64px));
  max-width: min(960px, calc(100vw - 64px));
  height: auto;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  overflow: hidden;
  text-align: left;
}
.nm-crm-research-companies-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
  flex-shrink: 0;
  background: var(--white, #fff);
}
.nm-crm-research-companies-modal__header-text {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.nm-crm-research-companies-modal__header-text h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.nm-crm-research-companies-modal__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted, #667085);
  text-align: left;
}
.nm-crm-research-companies-modal__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  margin: 0 0 0.55rem;
  text-align: left;
}
.nm-crm-research-companies-modal__summary[hidden] {
  display: none !important;
}
.nm-crm-research-companies-modal__meta {
  display: none;
}
.nm-crm-research-companies-modal__toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
  flex-shrink: 0;
  background: var(--white, #fff);
  min-width: 0;
}
.nm-crm-research-companies-modal__toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
  width: 100%;
}
.nm-crm-research-companies-modal__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}
.nm-crm-research-stat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--nm-radius-pill, 999px);
  border: 1px solid var(--border-subtle, #eaecf0);
  background: var(--nm-surface-sunken, #f9fafb);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--app-text-muted, #667085);
  white-space: nowrap;
}
.nm-crm-research-companies-modal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.nm-crm-research-companies-list__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--app-text, #101828);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.nm-crm-research-companies-list__meta,
.nm-crm-research-companies-list__review-reason {
  text-align: left;
}
.nm-crm-research-companies-list__edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  min-width: 0;
}
.nm-crm-research-companies-list__edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
  text-align: left;
}
.nm-crm-research-companies-list__processing {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nm-crm-research-companies-list__spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--border-subtle, #eaecf0);
  border-top-color: var(--color-primary, #7c5cfc);
  border-radius: 50%;
  animation: nm-crm-research-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes nm-crm-research-spin {
  to {
    transform: rotate(360deg);
  }
}
.nm-crm-research-companies-loading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  width: 100%;
  min-height: min(280px, 42vh);
  box-sizing: border-box;
  padding: 1.5rem 1rem;
}
.nm-crm-research-companies-loading__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--border-subtle, #eaecf0);
  border-top-color: var(--color-primary, #7c5cfc);
  border-radius: 50%;
  animation: nm-crm-research-spin 0.7s linear infinite;
  flex-shrink: 0;
  margin-bottom: 0.35rem;
}
/* Modal liegt außerhalb .nm-crm-research-page – display:flex darf [hidden] nicht überschreiben */
.nm-crm-research-companies-modal [hidden],
.nm-crm-research-companies-loading[hidden],
#crmResearchCompaniesModal [hidden] {
  display: none !important;
}
.nm-crm-research-companies-modal__body.is-loading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: min(360px, 52vh);
}
.nm-crm-research-companies-modal__body.is-loading .nm-crm-research-companies-list,
.nm-crm-research-companies-modal__body.is-loading .nm-crm-research-companies-accordion,
.nm-crm-research-companies-modal__body.is-loading .nm-crm-research-companies-empty {
  display: none !important;
}
.nm-crm-research-companies-loading__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text, #101828);
  text-align: center;
}
.nm-crm-research-companies-loading__hint {
  font-size: 0.82rem;
  color: var(--app-text-muted, #667085);
  text-align: center;
  max-width: 22rem;
}
.nm-crm-research-companies-progress {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: var(--app-text-muted, #667085);
  background: var(--app-surface-muted, #f8fafc);
  border: 1px solid var(--app-border, #e4e7ec);
  border-radius: 8px;
}
.nm-crm-research-companies-progress.is-spinning {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nm-crm-research-companies-progress__spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid var(--border-subtle, #eaecf0);
  border-top-color: var(--color-primary, #7c5cfc);
  border-radius: 50%;
  animation: nm-crm-research-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.nm-crm-research-companies-progress__label {
  flex: 1;
  min-width: 0;
}
.nm-crm-research-companies-progress.is-spinning {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nm-crm-research-companies-progress__spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid var(--border-subtle, #eaecf0);
  border-top-color: var(--color-primary, #7c5cfc);
  border-radius: 50%;
  animation: nm-crm-research-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.nm-crm-research-companies-progress__label {
  flex: 1;
  min-width: 0;
}
.nm-crm-research-companies-modal__footer-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--app-text-muted, #667085);
  max-width: 18rem;
  text-align: left;
}
.nm-crm-research-companies-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border-subtle, #eaecf0);
  flex-shrink: 0;
  background: var(--white, #fff);
  width: 100%;
  box-sizing: border-box;
}
.nm-crm-research-companies-modal__actions-left,
.nm-crm-research-companies-modal__actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.nm-crm-research-companies-modal__actions-right {
  margin-left: auto;
}
.nm-crm-research-companies-import-progress {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted, #667085);
}
@media (max-width: 900px) {
  .nm-crm-research-companies-modal.modal-content,
  .modal-content.nm-crm-research-companies-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .nm-crm-research-companies-list__edit-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .nm-crm-research-companies-modal.modal-content,
  .modal-content.nm-crm-research-companies-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .nm-crm-research-companies-list__row {
    grid-template-columns: 1fr;
  }
  .nm-crm-research-companies-list__side {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .nm-crm-research-companies-modal__actions-right {
    width: 100%;
    margin-left: 0;
  }
  .nm-crm-research-companies-modal__actions-right .nm-btn--primary {
    flex: 1 1 auto;
    justify-content: center;
  }
  .nm-crm-research-companies-modal__footer-hint {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .nm-crm-research-companies-modal.modal-content,
  .modal-content.nm-crm-research-companies-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .nm-crm-research-companies-modal__toolbar-actions {
    width: 100%;
    margin-left: 0;
  }
}
.nm-crm-research-companies-modal__filters .nm-btn.is-active,
.nm-crm-research-companies-modal__filters .nm-crm-research-chip.is-active {
  border-color: var(--color-primary, #7c5cfc);
  color: var(--color-primary, #7c5cfc);
}
.nm-crm-research-companies-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.85rem 1.35rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.nm-crm-research-companies-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nm-crm-research-companies-list__item {
  padding: 0.7rem 0.15rem;
  border: 0;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
  border-radius: 0;
  background: transparent;
}
.nm-crm-research-companies-list__item:last-child {
  border-bottom: 0;
}
.nm-crm-research-companies-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem 1rem;
  width: 100%;
}
.nm-crm-research-companies-list__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nm-crm-research-companies-list__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-shrink: 0;
}
.nm-crm-research-companies-list__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.nm-crm-research-companies-list__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
.nm-crm-research-companies-list__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--app-text, #101828);
  line-height: 1.3;
}
.nm-crm-research-companies-list__meta {
  margin-top: 0;
  font-size: 0.8rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.35;
  word-break: break-word;
}
.nm-crm-research-companies-list__review-reason {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.3;
}
.nm-crm-research-companies-list__crm-target {
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-warning-100, #fef9c3) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning-300, #fde047) 50%, transparent);
}
.nm-crm-research-companies-list__crm-target-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-text, #101828);
}
.nm-crm-research-companies-list__crm-target-row {
  margin-top: 0.12rem;
  font-size: 0.72rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.3;
}
.nm-crm-research-companies-list__hints {
  margin-top: 0.35rem;
}
.nm-crm-research-companies-list__hint {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-list__crm-link {
  color: var(--color-primary, #7c5cfc);
  text-decoration: none;
}
.nm-crm-research-companies-list__crm-link:hover,
.nm-crm-research-companies-list__crm-link:focus-visible {
  text-decoration: underline;
}
.nm-crm-research-companies-list__resolve {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.nm-crm-research-companies-list__resolve-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-list__resolve-btn {
  margin-top: 0.1rem;
}
.nm-crm-research-companies-list__enrich {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.nm-crm-research-companies-list__enrich-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-list__enrich-btn {
  margin-top: 0.1rem;
}
.nm-crm-research-companies-list__conflicts {
  margin-top: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-warning-300, #fcd34d);
  background: var(--color-warning-50, #fffbeb);
}
.nm-crm-research-companies-list__conflicts .nm-crm-research-companies-list__hint {
  margin: 0.15rem 0 0;
}
.nm-crm-research-companies-list__conflicts .nm-crm-research-companies-list__hint:first-child {
  margin-top: 0;
  font-weight: 600;
}
.nm-crm-research-companies-modal__bulk-progress {
  margin: 0;
  font-size: 0.82rem;
  color: var(--app-text-muted, #667085);
  white-space: nowrap;
}
.nm-crm-research-companies-empty,
.nm-crm-research-companies-error {
  margin: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-empty:not(.nm-crm-research-companies-empty--onboard) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--nm-radius-md, 8px);
  border: 1px solid rgba(34, 139, 230, 0.25);
  background: var(--nm-info-soft, rgba(34, 139, 230, 0.1));
  color: var(--app-text, #101828);
}
.nm-crm-research-companies-empty:not(.nm-crm-research-companies-empty--onboard)[hidden] {
  display: none !important;
}
.nm-crm-research-companies-empty--onboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 2rem 1.25rem 1.5rem;
  max-width: 26rem;
  margin: 0.75rem auto 0;
  border: none;
  background: transparent;
}
.nm-crm-research-companies-empty--onboard[hidden] {
  display: none !important;
}
.nm-crm-research-companies-empty__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text, #101828);
}
.nm-crm-research-companies-empty--onboard .nm-crm-research-companies-empty__title {
  font-size: 1.05rem;
}
.nm-crm-research-companies-empty__text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--app-text-muted, #667085);
  line-height: 1.45;
}
.nm-crm-research-companies-empty__hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--app-text-muted, #667085);
}
.nm-crm-research-companies-empty__hint[hidden] {
  display: none !important;
}
.nm-crm-research-companies-empty--onboard .nm-crm-research-companies-empty__hint {
  margin: 0 0 0.35rem;
}
.nm-crm-research-companies-empty--onboard .nm-btn {
  margin-top: 0.25rem;
}
.nm-crm-research-companies-error {
  color: var(--color-danger-700, #b42318);
  text-align: center;
  padding: 1.25rem 1rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.nm-crm-research-companies-list__bulk-check {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.nm-crm-research-companies-list__bulk-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
.nm-crm-research-companies-list__workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-subtle, #eaecf0);
}
.nm-crm-research-companies-list__workflow .nm-btn {
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
}
@media (max-width: 640px) {
  .nm-crm-research-tool-row {
    flex-wrap: wrap;
  }
  .nm-crm-research-tool-row > .nm-btn {
    width: 100%;
    justify-content: center;
  }
}
#crmResearchCompanyReviewModal.modal {
  z-index: 10060;
}
.nm-crm-research-company-review-modal {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.nm-crm-research-company-review-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--border-subtle, #eaecf0);
}
.nm-crm-research-company-review-modal__header h4 {
  margin: 0;
  font-size: 1.05rem;
}
.nm-crm-research-company-review-modal__body {
  padding: 0.85rem 1.15rem;
  overflow: auto;
  flex: 1 1 auto;
}
.nm-crm-research-company-review-modal__conflicts {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-warning-300, #fcd34d);
  background: var(--color-warning-50, #fffbeb);
  font-size: 0.85rem;
}
.nm-crm-research-company-review-form {
  display: grid;
  gap: 0.65rem;
}
.nm-crm-research-company-review-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.nm-crm-research-company-review-form__house {
  max-width: 7rem;
}
.nm-crm-research-company-review-exclude {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-subtle, #eaecf0);
  display: grid;
  gap: 0.55rem;
}
.nm-crm-research-company-review-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid var(--border-subtle, #eaecf0);
  background: var(--white, #fff);
}
.nm-crm-research-companies-accordion {
  margin: 0.75rem 0 0.25rem;
  border: 1px solid var(--border-subtle, #eaecf0);
  border-radius: 10px;
  background: var(--surface-muted, #fafafa);
  overflow: hidden;
}
.nm-crm-research-companies-accordion__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.nm-crm-research-companies-accordion__toggle:focus-visible {
  outline: 2px solid var(--nm-brand, #7c5cfc);
  outline-offset: -2px;
}
.nm-crm-research-companies-accordion__title {
  font-size: 0.9rem;
  font-weight: 600;
}
.nm-crm-research-companies-accordion__chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.nm-crm-research-companies-accordion.is-open .nm-crm-research-companies-accordion__chevron {
  transform: rotate(-135deg);
}
.nm-crm-research-companies-accordion__panel {
  border-top: 1px solid var(--border-subtle, #eaecf0);
  padding: 0.35rem 0.45rem 0.55rem;
  background: var(--white, #fff);
}
.nm-crm-research-companies-list--compact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nm-crm-research-companies-list__item--compact .nm-crm-research-companies-list__row {
  padding: 0.45rem 0.5rem;
}
.nm-crm-research-companies-list__item--compact .nm-crm-research-companies-list__name {
  font-size: 0.9rem;
}
.nm-crm-research-drawer-error {
  margin: 0.75rem 0 0;
  padding: 10px 12px;
  border-radius: var(--nm-radius-md, 8px);
  background: var(
    --crm-status-danger-bg,
    color-mix(in srgb, #fc5757 14%, #fff)
  );
  color: var(--crm-status-danger-text, var(--color-danger-700, #b42318));
  font-size: 0.86rem;
}
.nm-crm-research-drawer-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  justify-content: space-between;
}
.nm-crm-research-drawer-footer__left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.nm-crm-research-drawer-footer__right,
.nm-crm-research-drawer-footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}
.nm-crm-research-drawer-footer .nm-btn {
  min-height: 2rem;
}
.mapboxgl-popup.nm-crm-research-hover-popup-wrap,
.maplibregl-popup.nm-crm-research-hover-popup-wrap {
  z-index: 5;
}
.mapboxgl-popup.nm-crm-research-hover-popup-wrap .mapboxgl-popup-content,
.maplibregl-popup.nm-crm-research-hover-popup-wrap .maplibregl-popup-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.mapboxgl-popup.nm-crm-research-hover-popup-wrap .mapboxgl-popup-tip,
.maplibregl-popup.nm-crm-research-hover-popup-wrap .maplibregl-popup-tip {
  border-top-color: rgba(16, 24, 40, 0.94);
}
.nm-crm-research-hover-popup {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(16, 24, 40, 0.94);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.22);
  pointer-events: none;
  max-width: 240px;
}
.nm-crm-research-hover-popup__name {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.nm-crm-research-hover-popup__status {
  display: inline-block;
  margin-bottom: 0.3rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  opacity: 1;
}
.nm-crm-research-hover-popup__loc {
  font-size: 0.76rem;
  opacity: 0.88;
  margin-bottom: 0.15rem;
}
.nm-crm-research-hover-popup__priority {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.78;
}
@media (max-width: 900px) {
  section.nm-crm-research-page,
  .nm-crm-research-page {
    padding: 20px 16px 20px;
  }
  .nm-crm-research-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .nm-crm-research-toolbar__coords {
    max-width: none;
    width: 100%;
  }
  .nm-crm-research-toolbar__actions {
    margin-left: 0;
    width: 100%;
  }
  .nm-crm-research-toolbar__actions .nm-btn {
    width: 100%;
  }
  .nm-crm-research-toolbar__sep {
    display: none;
  }
  .nm-crm-research-map-shell {
    min-height: max(22rem, calc(100vh - 16rem));
  }
  .nm-crm-research-legend {
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.45rem 0.55rem;
  }
  .nm-crm-research-draw-bar {
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    max-width: none;
  }
  .nm-crm-research-draw-bar__actions {
    width: 100%;
  }
  .nm-crm-research-draw-bar__actions .nm-btn {
    flex: 1 1 auto;
  }
  .nm-crm-research-drawer-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .nm-crm-research-drawer-footer__right,
  .nm-crm-research-drawer-footer-right {
    margin-left: 0;
    width: 100%;
  }
  .nm-crm-research-drawer-footer__right .nm-btn,
  .nm-crm-research-drawer-footer-right .nm-btn {
    flex: 1 1 auto;
  }
  #crmResearchDrawer .nm-drawer__panel--md,
  #crmResearchDrawer .nm-drawer__panel--lg {
    width: min(100vw, 100%);
  }
}