@import url('../fonts/carrois.css');
:root {
  /* Multopia CI Colors */
  --primary: #FF8F2C;
  --primary-hover: #E66B00;
  --primary-dark: #E66B00;
  --primary-light: color-mix(in srgb, var(--primary) 8%, transparent);
  
  /* CI Backgrounds */
  --bg-body: #f3f4f6;
  --bg-surface: #ffffff;
  --bg-section-alt: #f9fafb;
  --bg-sidebar: #3B3B3B;
  --text-sidebar: #E0E0E0;
  
  --text-main: #3B3B3B;
  --text-muted: #6b7280;
  --text-inverse: #3B3B3B;
  
  /* Semantische Farben (Strict CI Mapped) */
  --success: #3B3B3B;
  --danger: #FF8F2C;
  --warning: #E66B00;
  --info: #3B3B3B;

  /* Multopia CI Sketchy Components */
  --border-sketchy: 1px solid rgba(59, 59, 59, 0.2);
  --radius-sketchy: 255px 15px 225px 15px/15px 225px 15px 255px;

  /* CI Shadows (Hard Flat Bottom) */
  --shadow-sm: 0 1px 0 rgba(17, 24, 39, 0.04);
  --shadow: 0 2px 0 rgba(17, 24, 39, 0.06);
  --shadow-hard: 0 4px 0 rgba(17, 24, 39, 0.08);
  --shadow-hard-dark: 0 2px 0 rgba(17, 24, 39, 0.8);
  --shadow-lg: 0 6px 0 rgba(17, 24, 39, 0.1);
  
  /* Geometry */
  --border-radius-sm: 6px;
  --border-radius: 12px;
  --border-radius-lg: 16px;
  
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --header-height: 65px;
  --logo-container-height: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PT Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, label, .form-label {
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

a {
  text-decoration: none;
  color: var(--text-main);
  transition: var(--transition);
}
a:hover {
  color: var(--primary);
}

/* Layout System */
.erp-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-body);
}

.erp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Scrollen innerhalb von erp-content erlauben */
}

/* Full-width page modifier (e.g. Calendar) — injected server-side by _Layout.cshtml */
.erp-main.page-fullwidth {
  margin-right: 16px !important;
}
.erp-content.page-fullwidth {
  margin-right: 24px !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.erp-content {
  flex: 1;
  padding: 32px 24px 0 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.erp-content:has(#listViewContainer:not([style*="display: none"]):not([style*="display:none"])) {
  overflow: hidden;
}

/* Calendar page: remove right/bottom padding so calendar fills edge-to-edge */
.erp-content:has(#mainViewContainer) {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Sidebar --- */
.erp-sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  z-index: 1000;
  margin: 16px 0 16px 16px;
  border-radius: 10px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  height: calc(100vh - 32px);
}

.erp-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* Initialisierungsklasse, um Flackern beim Laden zu verhindern */
.sidebar-init-collapsed .erp-sidebar {
  width: var(--sidebar-collapsed-width) !important;
  transition: none !important;
}
.sidebar-init-collapsed .erp-sidebar .nav-text {
  opacity: 0 !important;
  width: 0 !important;
  margin-left: 0 !important;
  transition: none !important;
}
.sidebar-init-collapsed .erp-sidebar .nav-group-header {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: none !important;
}
.sidebar-init-collapsed .erp-sidebar .nav-group-content .nav-item {
  padding-left: 12px !important;
  transition: none !important;
}
.sidebar-init-collapsed .erp-sidebar .nav-item {
  justify-content: center !important;
  transition: none !important;
}
.sidebar-init-collapsed .erp-sidebar .sidebar-brand img {
  display: none !important;
}
.sidebar-init-collapsed .erp-sidebar .sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
}
.sidebar-init-collapsed .erp-sidebar .sidebar-toggle-link svg {
  transform: rotate(180deg) !important;
}

/* Prevent animations on page load */
html.prevent-nav-animation * {
  transition: none !important;
}

.sidebar-brand {
  height: var(--logo-container-height, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand img {
  height: 80px; /* Logo */
  width: auto;
  transition: var(--transition);
}

.erp-sidebar.collapsed .sidebar-brand img {
  display: none;
}

.sidebar-brand img {
  animation: pulse-logo 3.5s infinite ease-in-out;
}
@keyframes pulse-logo {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,143,44,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(255,143,44,0.4)); }
}

.erp-sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 0;
}


.sidebar-toggle-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}
.sidebar-toggle-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-toggle-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.erp-sidebar.collapsed .sidebar-toggle-link svg {
  transform: rotate(180deg);
}

.sidebar-nav {
  flex: 1;
  padding: 12px 12px 24px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-nav > * {
  flex-shrink: 0;
}


.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--text-sidebar);
  font-weight: 500;
  margin-bottom: 4px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  background-color: transparent;
  position: relative;
  border: 1px solid transparent;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--primary-hover);
}

.nav-item.active {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary-hover);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background-color: var(--primary);
  border-radius: 0 4px 4px 0;
}

/* Sidebar Footer (Einstellungen) */
.sidebar-footer {
  padding: 8px 16px 12px;
  border-top: none;
  background-color: var(--bg-sidebar);
}
.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
  cursor: pointer;
}
.sidebar-footer-link:hover {
  color: rgba(255, 255, 255, 0.85);
}
.erp-sidebar.collapsed .sidebar-footer {
  padding: 8px 0 12px;
  display: flex;
  justify-content: center;
}
.erp-sidebar.collapsed .sidebar-footer .nav-text {
  display: none;
}

/* Abgetrennte Sektion: Administration & Entwickler */
.sidebar-section-bottom {
  margin-top: 16px;
  padding-top: 12px;
  position: relative;
}
.sidebar-section-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.sidebar-section-bottom .nav-group {
  margin-top: 0;
}
.sidebar-section-bottom .nav-group + .nav-group {
  margin-top: 2px;
}

/* Verstecke Nav-Gruppen im eingeklappten Zustand (nur Haupt-Tasten sichtbar) */
.erp-sidebar.collapsed .nav-group {
  display: none !important;
}

/* Navigationsgruppen */
.nav-group {
  margin-bottom: 2px;
  margin-top: 16px; /* Mehr Abstand zwischen normalen Einträgen und Gruppen */
}
.nav-group + .nav-group {
  margin-top: 4px; /* Weniger Abstand zwischen den Gruppen selbst */
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
  letter-spacing: 0.5px;
}

.nav-group-header:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-group-header svg.chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

.nav-group.expanded .nav-group-header svg.chevron {
  transform: rotate(90deg);
}

.nav-group-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.nav-group.expanded .nav-group-content {
  max-height: 500px;
}

.nav-group-content .nav-item {
  padding-left: 36px;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.nav-group-content .nav-item:first-child {
  margin-top: 4px;
}
.nav-group-content .nav-item:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 2px 0 var(--text-main);
  transform: translateY(-1px);
}
.nav-group-content .nav-item.active {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  box-shadow: 0 2px 0 var(--text-main);
}

.erp-sidebar.collapsed .nav-group-header {
  opacity: 1;
  height: 2px;
  width: 16px;
  margin: 12px auto;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  overflow: hidden;
}
.erp-sidebar.collapsed .nav-group-header * {
  display: none !important;
}

.erp-sidebar.collapsed .nav-group-content {
  max-height: none;
}

.erp-sidebar.collapsed .nav-group-content .nav-item {
  padding-left: 12px;
}

.erp-sidebar.collapsed .nav-item {
  justify-content: center;
  position: relative;
}

.erp-sidebar.collapsed .nav-item.active {
  border-left: none;
  background: rgba(255,143,44,0.15);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.nav-item:hover .nav-icon {
  transform: scale(1.15) translateX(2px);
}
.nav-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-text {
  margin-left: 16px;
  font-size: 0.9rem;
  transition: opacity 0.2s, margin 0.2s;
}

.erp-sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
  margin-left: 0;
}

/* --- Main Content Area --- */
.erp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bg-body);
}

/* Kopfzeile */
.erp-header-container {
  padding: 0 24px 0 24px;
  background-color: var(--bg-body);
  position: sticky;
  top: 0;
  z-index: 10;
}

.erp-header {
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 22px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  box-shadow: var(--shadow-hard);
  gap: 16px;
}

.mobile-menu-btn {
  display: none !important;
}
.mobile-logo {
  display: none !important;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  flex-basis: 0;
  min-width: 0;
  white-space: nowrap;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-icon:hover {
  background-color: var(--primary-light);
  color: var(--primary);
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--bg-section-alt);
  border-radius: 50px;
  padding: 8px 18px;
  width: 400px;
  border: 1px solid rgba(59,59,59,0.1);
  transition: var(--transition);
}
.search-bar:focus-within {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
  width: 480px;
}
.search-bar svg {
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  transition: color 0.2s;
}
.search-bar:focus-within svg {
  color: var(--primary);
}
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  margin-left: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-main);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  flex: 1;
  flex-basis: 0;
  min-width: 0;
  white-space: nowrap;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 1.05rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.user-info {
  display: flex;
  flex-direction: column;
}
.user-name {
  font-size: 1rem;
  font-weight: 600;
}
.user-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Benutzer-Kontextmenü (Dropdown) */
.profile-dropdown-container {
  position: relative;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background-color: var(--bg-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-hard), 0 0 0 1px rgba(59,59,59,0.08);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}

.profile-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-header {
  padding: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-header .avatar {
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
}

.dropdown-header .user-info {
  display: flex;
  flex-direction: column;
}

.dropdown-header .user-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.dropdown-header .user-email {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dropdown-menu {
  padding: 8px 0;
  list-style: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: var(--bg-body);
  color: var(--primary);
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.dropdown-item:hover svg {
  color: var(--primary);
}

/* Inhaltsbereich */
.erp-content {
  flex: 1;
  padding: 32px 32px 0 32px;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 24px;
}
.page-title {
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 0px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.page-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-top: -4px;
  line-height: 1.35;
}

/* Karten & Widgets */
.card {
  background-color: var(--bg-surface);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-hard);
  padding: 24px;
  transition: var(--transition);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Color accents for KPI cards (Strict CI Mapped) */
.kpi-card.kpi-offers {
  --kpi-accent: var(--primary);
  --kpi-accent-light: color-mix(in srgb, var(--primary) 8%, transparent);
  /* --kpi-accent-rgb removed */
}

.kpi-card.kpi-orders-po {
  --kpi-accent: var(--warning);
  --kpi-accent-light: rgba(255, 193, 7, 0.08);
  --kpi-accent-rgb: 255, 193, 7;
}

.kpi-card.kpi-contracts {
  --kpi-accent: var(--info);
  --kpi-accent-light: rgba(23, 162, 184, 0.08);
  --kpi-accent-rgb: 23, 162, 184;
}

.kpi-card.kpi-outgoing-invoices {
  --kpi-accent: var(--danger);
  --kpi-accent-light: rgba(220, 53, 69, 0.08);
  --kpi-accent-rgb: 220, 53, 69;
}

.kpi-card.kpi-incoming-invoices {
  --kpi-accent: var(--primary);
  --kpi-accent-light: color-mix(in srgb, var(--primary) 8%, transparent);
  /* --kpi-accent-rgb removed */
}

.kpi-card.kpi-abos {
  --kpi-accent: var(--primary-dark);
  --kpi-accent-light: rgba(230, 107, 0, 0.08);
  --kpi-accent-rgb: 230, 107, 0;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  min-height: 115px;
  background-color: var(--bg-surface);
  border-radius: var(--radius-sketchy, 8px);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--kpi-accent);
  box-shadow: 3px 3px 0 var(--text-main);
  padding: 14px 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 1;
}
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--text-main);
  border-color: var(--kpi-accent);
}
.kpi-card:nth-child(1) { animation-delay: 0.08s; }
.kpi-card:nth-child(2) { animation-delay: 0.16s; }
.kpi-card:nth-child(3) { animation-delay: 0.24s; }
.kpi-card:nth-child(4) { animation-delay: 0.32s; }
.kpi-card:nth-child(5) { animation-delay: 0.40s; }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.kpi-title {
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0;
  border-bottom: 2px solid var(--kpi-accent, var(--text-main));
  padding-bottom: 2px;
  display: inline-block;
  margin-right: 64px;
}
.kpi-icon-container {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  opacity: 0.85;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}
.kpi-card:hover .kpi-icon-container {
  transform: scale(1.15) rotate(-5deg);
  opacity: 1;
  background: transparent;
  border: none;
  box-shadow: none;
}
.kpi-illustration {
  width: 100%;
  height: 100%;
  color: var(--kpi-accent);
  stroke-width: 1.8px;
  filter: drop-shadow(1px 1px 0 color-mix(in srgb, var(--kpi-accent) 20%, transparent));
  transition: var(--transition);
}
.kpi-card:hover .kpi-illustration {
  color: var(--kpi-accent);
}

/* Karten-SVG-Animationen */
.illust-coin {
  transform-origin: 38px 42px;
  transition: var(--transition);
}
.kpi-card:hover .illust-coin {
  animation: floatCoin 1.5s ease-in-out infinite;
}
@keyframes floatCoin {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.05);
  }
}

.illust-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: drawCheck 1.2s ease-out forwards;
}
.check-1 { animation-delay: 0.4s; }
.check-2 { animation-delay: 0.8s; }

.kpi-card:hover .illust-check {
  animation: none;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease-out;
}
.kpi-card:hover .check-1 { transition-delay: 0.1s; }
.kpi-card:hover .check-2 { transition-delay: 0.3s; }

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.illust-alert-badge {
  fill: var(--danger);
  stroke: var(--text-main);
  transform-origin: 48px 16px;
}
@keyframes alertPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    fill: var(--primary);
  }
}
.kpi-card:hover .illust-alert-badge {
  transform: scale(1.1);
  fill: var(--primary);
}

.illust-receipt {
  transition: var(--transition);
  transform: translateY(-4px);
}
.kpi-card:hover .illust-receipt {
  animation: printSlide 1.5s ease-in-out infinite alternate;
}
@keyframes printSlide {
  0% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(2px);
  }
}

/* Card Body Layout */
.kpi-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.kpi-value-container {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
  font-family: 'Carrois Gothic', sans-serif;
  margin: 0;
}
.kpi-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: var(--transition);
}
.kpi-badge.positive {
  background-color: rgba(59, 59, 59, 0.05);
  color: var(--success);
}
.kpi-badge.negative {
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
  color: var(--danger);
}
.kpi-badge.neutral {
  background-color: rgba(59, 59, 59, 0.03);
  color: var(--text-muted);
}

/* Progress bar style */
.kpi-progress-container {
  margin-top: 2px;
}
.kpi-progress {
  height: 4px;
  background-color: color-mix(in srgb, var(--kpi-accent) 5%, transparent);
  border: none;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}
.kpi-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--kpi-accent) 0%, color-mix(in srgb, var(--kpi-accent) 80%, transparent) 100%);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
}

.kpi-trend {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 8px;
  margin-top: auto;
  transition: var(--transition);
  position: relative;
  z-index: 2;
}
.kpi-card:hover .kpi-trend {
  border-top-color: color-mix(in srgb, var(--kpi-accent) 15%, transparent);
  color: var(--text-main);
}

/* Datentabellen */
.data-table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 350px;
  background-color: var(--bg-surface);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.data-table.is-empty {
  height: 100%;
}
.data-table th, .data-table td {
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.data-table th {
  padding: 8px 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.data-table td {
  padding: 12px 10px;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tbody tr {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.data-table tbody tr:hover {
  background-color: var(--bg-hover);
  transform: translateY(-2px);
}
.data-table tbody tr:active {
  transform: translateY(-1px) scale(0.99);
}

.badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge.success { background: rgba(59, 59, 59, 0.1); color: var(--success); }
.badge.warning { background: rgba(230, 107, 0, 0.1); color: var(--warning); }

/* Schaltflächen */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: white;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 20px;
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Einheitlicher Loesch-Button: gleiche Metrik wie .btn-primary, Farbwelt von .btn-danger */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #dc2626;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 20px;
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.btn-danger:active {
  transform: translateY(1px);
  box-shadow: none;
}
.btn-danger svg {
  stroke: #ffffff;
}

/* Rotations-Animation fuer Lade-Spinner (u.a. globale Suche) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}

/* Klickbare Elemente zeigen immer die Hand */
button:not(:disabled),
[role="button"],
[onclick],
label[for] {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}
.btn-sm svg {
  width: 16px;
  height: 16px;
}

/* Mobiles Overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}

/* Kalender-Komponente */
.calendar-card {
  padding: 0;
  overflow: hidden;
  border-radius: 0 !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
  box-shadow: none !important;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-left: 1px solid rgba(0,0,0,0.05);
  flex-grow: 1;
  height: 100%;
}

.calendar-day-header {
  padding: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  background-color: var(--bg-body);
  border-right: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.calendar-day {
  min-height: 90px;
  padding: 10px;
  border-right: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background-color: var(--bg-surface);
  transition: var(--transition);
}

.calendar-day.empty {
  background-color: #f9fafb;
}

.calendar-day:hover:not(.empty) {
  background-color: #f8fafc;
}

.calendar-day.today {
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.calendar-day .day-number {
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius);
  margin-bottom: 8px;
}

.calendar-day.today .day-number {
  background-color: var(--primary);
  color: white;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
}

.event-item.primary { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-hover); border-color: var(--primary); }
.event-item.success { background: rgba(59, 59, 59, 0.1); color: var(--success); border-color: var(--success); }
.event-item.warning { background: rgba(230, 107, 0, 0.1); color: var(--warning); border-color: var(--warning); }
.event-item.danger { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--danger); border-color: var(--danger); }

.event-time {
  font-weight: 700;
  opacity: 0.8;
}
.event-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nach-Oben-Scrollen Button */
.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 104px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  border: 1px solid var(--border-color); /* Multopia CI */
  box-shadow: 0 4px 0 var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: #ffffff;
  color: var(--primary);
  transform: translateY(-4px) scale(1.08) rotate(5deg);
  box-shadow: 0 8px 0 var(--primary);
}

.scroll-to-top:active {
  transform: translateY(2px) scale(0.96) rotate(0deg);
  box-shadow: 0 2px 0 var(--primary);
}

/* --- Floating Action Button (FAB) --- */
.fab-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fab-main {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 0 var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.fab-main:hover {
  background-color: #ffffff;
  color: var(--primary);
  opacity: 1;
  transform: translateY(-4px) scale(1.08) rotate(5deg);
  box-shadow: 0 8px 0 var(--primary);
}
.fab-main:active {
  transform: translateY(2px) scale(0.96) rotate(0deg);
  box-shadow: 0 2px 0 var(--primary);
  opacity: 1;
}
.fab-main svg {
  width: 32px;
  height: 32px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-container.active .fab-main svg {
  transform: rotate(45deg);
}
.fab-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-container.active .fab-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fab-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 0 var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.fab-option:hover {
  background-color: var(--primary-light);
  color: var(--primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 0 var(--primary);
}
.fab-option:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 1px 0 var(--primary);
}
.fab-option::before {
  content: attr(data-tooltip);
  position: absolute;
  right: 60px;
  background-color: var(--bg-sidebar);
  color: var(--text-sidebar);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.fab-option:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Responsive Breakpoints (Anpassung für verschiedene Bildschirmgrößen) */
@media (max-width: 992px) {
  .mobile-menu-btn {
    display: flex !important;
  }
  .mobile-logo {
    display: block !important;
    height: 36px;
    width: auto;
    object-fit: contain;
  }
  .erp-sidebar {
    position: fixed;
    left: calc(var(--sidebar-width) * -1);
    height: 100vh;
    margin: 0;
    border-radius: var(--border-radius);
  }
  .erp-sidebar.mobile-open {
    left: 0;
  }
  .mobile-overlay.active {
    display: block;
  }
  .search-bar {
    display: none; /* Verstecke die globale Suche auf kleinen Bildschirmen, verlasse dich auf ein Such-Icon */
  }
  .erp-header {
    padding: 0 16px;
    height: 64px;
    border-radius: 12px;
  }
  .erp-header-container {
    padding: 16px 16px 0 16px;
  }
  .erp-content {
    padding: 16px 16px 0 16px;
  }
  /* Breakpoint für mobilen Kalender */
  .calendar-grid {
    display: block;
    border: none;
  }
  .calendar-day-header {
    display: none;
  }
  .calendar-day {
    min-height: auto;
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 8px;
    border-radius: 8px;
  }
  .calendar-day.empty {
    display: none;
  }
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-left, .table-filter {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .toolbar-left > *, .table-filter > *, .table-search {
    width: 100% !important;
    min-width: 0 !important;
  }
  .toolbar-right {
    justify-content: flex-end;
    width: 100%;
    margin-top: 8px;
  }
}

/* --- Minimal Design System Utilities --- */
.d-flex { display: flex; }
.d-none { display: none; }
@media (min-width: 576px) { .d-sm-flex { display: flex; } }
.flex-column { flex-direction: column; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.mt-4 { margin-top: 24px; }
.mb-4 { margin-bottom: 24px; }
.ms-2 { margin-left: 8px; }
.me-2 { margin-right: 8px; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.text-muted { color: var(--text-muted) !important; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.w-100 { width: 100%; }

/* Minimales Raster-System (Grid) */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
.row > [class^="col-"] {
  padding-right: 12px;
  padding-left: 12px;
}
.col-lg-8 { width: 66.666667%; }
.col-lg-6 { width: 50%; }
.col-lg-4 { width: 33.333333%; }
@media (max-width: 992px) {
  .col-lg-8, .col-lg-6, .col-lg-4 { width: 100%; }
}

/* Kontextmenü – eine Gestaltung für alle Menüs der Anwendung.
   Vorher brachte jede Seite ihre eigene mit: unterschiedliche Schriftarten
   (Carrois Gothic statt der Fließschrift), unterschiedliche Schatten, Radien und
   Löschfarben. Aussehen und Schrift kommen ab jetzt ausschließlich von hier; die
   Seiten entscheiden nur noch, wann ihr Menü sichtbar ist und wo es steht.

   display und position bleiben absichtlich bescheiden: Seiten, die ihr Menü über
   style.display ein- und ausblenden oder fest positionieren, überschreiben beides
   direkt am Element und behalten damit ihr Verhalten. */
.context-menu {
  display: none;
  position: absolute;
  z-index: 10000;
  flex-direction: column;
  min-width: 170px;
  padding: 8px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s ease;
}

.context-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.context-menu-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.context-menu-item.danger,
.context-menu-item.danger svg {
  color: var(--danger);
}

.context-menu-separator {
  height: 1px;
  margin: 4px 0;
  background: rgba(59, 59, 59, 0.15);
}

/* Fußzeile – gemeinsam für Anmeldung, Anwendung und Installationshinweis (_AppFooter.cshtml) */
.erp-footer {
  padding: 24px 32px 6px 32px;
  opacity: 0.5;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: none;
  font-family: 'Carrois Gothic', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* margin-top rückt die Fußzeile in einer Spalten-Anordnung an den unteren Rand –
     bisher stand das im _Layout als Attribut an der Fußzeile selbst.
     position ist nötig, damit das z-index darunter überhaupt greift: auf der Anmelde-
     und der Installationsseite liegen fest positionierte Verzierungen im Hintergrund. */
  margin-top: auto;
  position: relative;
  z-index: 10;
}

.erp-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}

.erp-footer a:hover {
  color: var(--primary);
}

.erp-footer .footer-copyright {
  font-weight: 500;
}

.erp-footer .footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
}

.erp-footer .footer-separator {
  color: rgba(0, 0, 0, 0.15);
}

/* --- Benutzer Table Page Design System Components --- */
.data-table-card {
  padding: 0 !important;
  margin-bottom: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-grow: 1;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-search {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 11px 16px;
  border: 2px solid rgba(59, 59, 59, 0.28);
  transition: var(--transition);
  width: 260px;
}
.table-search:focus-within {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  width: 300px;
}
.table-search svg {
  color: var(--text-muted);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.table-search input {
  border: none;
  background: transparent;
  outline: none;
  margin-left: 8px;
  width: 100%;
  font-size: 0.85rem;
}
 
.table-filter {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
 
.table-filter select {
  background-color: #ffffff;
  border: 2px solid rgba(59, 59, 59, 0.28);
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 0.85rem;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
  cursor: pointer;
}
.table-filter select:focus {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.drag-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.2s;
}
.sortable-th:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.sortable-th.sorted {
  color: var(--primary-hover) !important;
  background-color: var(--primary-light);
}
.th-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.th-label {
  flex: 1;
}
.drag-dots {
  color: var(--text-muted);
  cursor: grab;
  opacity: 0.4;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.sortable-th:hover .drag-dots {
  opacity: 0.8;
}

/* Klassen für Drag and Drop */
.sortable-th.dragging {
  opacity: 0.4;
  border: 2px dashed var(--primary);
  background-color: var(--primary-light);
}
.sortable-th.over {
  border-left: 2px solid var(--primary);
  background-color: var(--primary-light);
}

.table-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-cell-name {
  font-weight: 600;
  color: var(--text-main);
}

/* Übergänge für Tabellenzeilen */
.fade-in-row {
  animation: rowEntrance 0.3s ease-out forwards;
}
@keyframes rowEntrance {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.04);
  flex-wrap: wrap;
  gap: 24px;
}
.pagination-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.table-pagination-container .pagination-info {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-left: auto;
}
.pagination-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--text-muted);
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-btn:hover:not(.disabled) {
  background-color: rgba(59, 59, 59, 0.05);
  color: var(--text-main);
  transform: translateY(-2px);
}
.page-btn.active {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(-2px);
}
.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-nav-btn {
  font-size: 1.2rem;
  font-weight: 400;
}

/* Illustrative Sketch-Buttons -> Modernized clean buttons */
.btn-illustrative {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff;
  color: var(--text-main);
  border: 1px solid rgba(59, 59, 59, 0.2);
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-illustrative svg {
  transition: var(--transition);
  color: var(--text-muted);
}
.btn-illustrative:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: rgba(59, 59, 59, 0.4);
  color: var(--primary);
}
.btn-illustrative:hover svg {
  color: var(--primary);
  transform: scale(1.1);
}
.btn-illustrative:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn-primary-sketch {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.btn-primary-sketch svg {
  color: #ffffff;
}
.btn-primary-sketch:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
}
.btn-primary-sketch:hover svg {
  color: #ffffff;
}
.btn-primary-sketch:active {
  background-color: var(--primary-dark);
}

/* Media Query für den Druck (Print) */
@media print {
  .print-hide,
  .erp-sidebar,
  .erp-header-container,
  .scroll-to-top,
  .dialog-backdrop,
  .erp-footer {
    display: none !important;
  }
  
  .erp-layout {
    display: block;
    height: auto;
    overflow: visible;
  }
  
  .erp-main {
    padding: 0;
    margin: 0;
    background: none;
    display: block;
    height: auto;
    overflow: visible;
  }
  
  .erp-content {
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  
  .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: none !important;
  }
  
  .data-table-container {
    overflow: visible;
  }
  
  .data-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .data-table th, .data-table td {
    border-bottom: 1px solid #000000 !important;
    color: #000000 !important;
    padding: 8px !important;
    font-size: 9pt !important;
  }
}

/* --- Selected Row Highlight --- */
.data-table tr.selected-row {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

.data-table tr.row-flagged,
.data-table tr.row-flagged td {
  background-color: color-mix(in srgb, var(--primary) 3%, transparent) !important;
}

/* --- Kommentare zum Datensatz (Offcanvas) --- */
.comment-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.comment-item.is-flagged {
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  border-color: color-mix(in srgb, var(--primary) 40%, rgba(59, 59, 59, 0.2));
}

.comment-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 15%, #fff);
  color: var(--primary-hover);
  font-size: 0.75rem;
  font-weight: bold;
}

.comment-actions {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.comment-item:hover .comment-actions,
.comment-item:focus-within .comment-actions,
.comment-item.is-flagged .comment-actions {
  opacity: 1;
}

/* --- Einheitliche Zellen-Bausteine für alle Listen --- */

/* Ruhigeres Grundgerüst: Kopfzeile leiser, Zeilen luftiger, nur eine feine
   Trennlinie und ein farbiger Akzent links beim Überfahren. */
.data-table th {
  padding: 10px 12px 8px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /* Kopfzeile bleibt beim Scrollen langer Listen stehen. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
}

.data-table td {
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.035);
}

.data-table tbody tr {
  position: relative;
  transition: background-color 0.15s ease;
}

/* Kein Anheben der Zeile mehr – das wirkte unruhig bei mehrzeiligen Zellen. */
.data-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary) 4%, transparent);
  transform: none;
}

.data-table tbody tr:active {
  transform: none;
}

.data-table tbody tr td:first-child {
  box-shadow: inset 2px 0 0 transparent;
  transition: box-shadow 0.15s ease;
}

.data-table tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--primary);
}

.data-table tbody tr.selected-row td:first-child {
  box-shadow: inset 2px 0 0 var(--primary);
}

.cell-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cell-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.cell-avatar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg,
      color-mix(in srgb, var(--primary) 18%, #fff),
      color-mix(in srgb, var(--primary) 8%, #fff));
  color: var(--primary-hover);
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.cell-identity-text,
.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cell-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.cell-sub,
.cell-line.muted {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.cell-line {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-mono {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text-muted) 90%, transparent);
}

/* Badges in Listen: weich gefüllt statt umrandet – ruhiger im Zeilenbild. */
.data-table .badge.outline {
  background: rgba(0, 0, 0, 0.04);
  border-color: transparent;
  color: var(--text-main);
}

.data-table .badge.primary {
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  border-color: transparent;
  color: var(--primary-hover);
}

.data-table .badge {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cell-tags {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cell-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cell-num {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.cell-num .cell-line {
  font-weight: 600;
}

.cell-empty {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Fortschritt unter dem Status (Projekte). */
.cell-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.cell-progress-bar {
  flex: 1;
  display: flex;
  height: 5px;
  min-width: 40px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.cell-progress-bar i {
  background: var(--success, #2ecc71);
}

.cell-progress-bar b {
  background: var(--primary);
}

.cell-progress-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Anschrift mit dezenter Karten-Taste (Routenplaner).
   Die Taste sitzt in jeder Zeile an derselben Stelle: rechts nach der Anschrift
   und mittig zum Anschriftenblock. Frueher stand sie direkt neben dem Text und
   sprang dadurch von Zeile zu Zeile, je nachdem wie lang Strasse oder Ort waren. */
.cell-address {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cell-address .cell-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.cell-address .cell-line svg {
  flex: none;
}

.cell-map-btn {
  flex: none;
  margin-left: auto;
  padding: 2px;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* Hervorgehoben wird nur, was direkt unter dem Zeiger liegt - nicht die ganze
   Zeile. Tastaturbedienung behaelt ihre sichtbare Markierung. */
.cell-map-btn:hover,
.cell-map-btn:focus-visible {
  opacity: 1;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Kommentar-Taste in der Liste: Anzahl als kleine Blase am Symbol. */
.btn-comment {
  position: relative;
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-comment:hover {
  color: var(--primary) !important;
  transform: scale(1.15);
}

.btn-comment .comment-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}

/* Markierte Karte in der Kartenansicht – analog zur markierten Tabellenzeile. */
.grid-card.card-flagged {
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
  border-color: color-mix(in srgb, var(--primary) 35%, rgba(59, 59, 59, 0.2));
}

.btn-flag {
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-flag:hover {
  color: var(--primary) !important;
  transform: scale(1.15);
}

/* --- Row Action Dropdown Menu --- */
.actions-dropdown-container {
  position: relative;
  display: inline-block;
}

.row-actions-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--box-shadow);
  z-index: 1060;
  display: none;
  flex-direction: column;
  padding: 8px 0;
  min-width: 160px;
}

.row-actions-dropdown.show {
  display: flex;
}

.dropdown-item-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.dropdown-item-action:hover {
  background-color: var(--bg-body);
  color: var(--primary-hover);
}

.dropdown-item-action svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown-item-action:hover svg {
  color: var(--primary);
}

/* --- Slide Overlay (Drawer) --- */
.slide-overlay-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.slide-overlay-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.slide-overlay-panel {
  position: absolute;
  right: 0px;
  top: 24px;
  bottom: 24px;
  width: 90%;
  max-width: 600px;
  height: auto;
  background: var(--bg-surface);
  box-shadow: -15px 15px 45px rgba(0,0,0,0.18);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 90px !important;
}

.slide-overlay-backdrop.show .slide-overlay-panel {
  transform: translateX(0);
}

.slide-overlay-header {
  padding: 16px 24px;
  background-color: var(--bg-surface);
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 2px solid rgba(0,0,0,0.05);
}

.slide-overlay-header-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.slide-overlay-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  margin-top: -6px;
}

.slide-overlay-header h3 {
  color: var(--text-main);
  margin: 0;
  font-size: 1.4rem;
}

.slide-overlay-header .btn-icon {
  color: var(--text-muted);
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  padding: 6px;
  width: 48px !important;
  height: 48px !important;
  font-size: 30px !important;
  margin-left: auto;
}
.slide-overlay-header .btn-icon:hover {
  background: var(--primary);
  color: white;
  transform: rotate(90deg);
}

.slide-overlay-body {
  padding: 16px 12px;
  padding-bottom: 90px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.slide-overlay-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 12px;
  background: var(--bg-body);
  flex-shrink: 0;
  margin-top: auto;
}

/* --- Multi Action Toolbar --- */
.multi-action-toolbar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--text-main);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 1000;
  border: 1px solid var(--border-color);
  border-color: #000;
}

.multi-action-toolbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.multi-action-toolbar span {
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.multi-action-toolbar .btn-icon-light {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.multi-action-toolbar .btn-icon-light:hover {
  background-color: rgba(255,255,255,0.1);
}

/* --- Modern Form Inputs (CI Compliant) --- */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.dropdown-item-action:hover {
  background-color: var(--bg-body);
  color: var(--primary-hover);
}

.dropdown-item-action svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown-item-action:hover svg {
  color: var(--primary);
}

/* --- Slide Overlay (Drawer) --- */
.slide-overlay-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.slide-overlay-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.slide-overlay-panel {
  position: absolute;
  right: 0px;
  top: 24px;
  bottom: 24px;
  width: 90%;
  max-width: 600px;
  height: auto;
  background: var(--bg-surface);
  box-shadow: -15px 15px 45px rgba(0,0,0,0.18);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide-overlay-panel--sm { max-width: 500px; }
.slide-overlay-panel--md { max-width: 600px; }
.slide-overlay-panel--lg { max-width: 850px; }
.slide-overlay-panel--xl { max-width: 950px; }
.slide-overlay-panel--xxl { max-width: 1100px; }

.slide-overlay-backdrop.show .slide-overlay-panel {
  transform: translateX(0);
}

.slide-overlay-header {
  padding: 16px 24px;
  background-color: var(--bg-surface);
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 2px solid rgba(0,0,0,0.05);
}

.slide-overlay-header-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.slide-overlay-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  margin-top: -6px;
}

.slide-overlay-header h3 {
  color: var(--text-main);
  margin: 0;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.slide-overlay-header .btn-icon {
  color: var(--text-muted);
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  padding: 0;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
}
.slide-overlay-header .btn-icon:hover {
  background: var(--primary);
  color: white;
  transform: rotate(90deg);
}

.slide-overlay-body {
  padding: 16px 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.slide-overlay-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-surface);
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 0 0 16px 16px;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.02);
}

.slide-overlay-footer button {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  height: 44px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  padding: 0 16px !important;
}

/* --- Multi Action Toolbar --- */
.multi-action-toolbar {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--text-main);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 1000;
  border: 1px solid var(--border-color);
  border-color: #000;
}

.multi-action-toolbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.multi-action-toolbar span {
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.multi-action-toolbar .btn-icon-light {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.multi-action-toolbar .btn-icon-light:hover {
  background-color: rgba(255,255,255,0.1);
}

/* --- Modern Form Inputs (CI Compliant) --- */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-control, .form-select {
  width: 100%;
  padding: 14px 16px;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text-main);
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sketchy, 255px 15px 225px 15px/15px 225px 15px 255px);
  transition: var(--transition);
  outline: none;
  box-shadow: var(--shadow-sm);
}

.form-control:hover, .form-select:hover {
  border-color: rgba(59, 59, 59, 0.3);
  background-color: #ffffff;
}

.form-control:focus, .form-select:focus {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.form-control:disabled, .form-select:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  border-color: rgba(0,0,0,0.05);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
}

.form-check-input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(59, 59, 59, 0.2);
  border-radius: 4px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:checked::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="radio"]:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check-label {
  font-size: 0.95rem;
  color: var(--text-main);
  user-select: none;
  cursor: pointer;
}

.multi-action-toolbar .btn-icon-light.danger {
  color: #ff8f8f;
}

.multi-action-toolbar .btn-icon-light.danger:hover {
  background-color: rgba(239, 68, 68, 0.2);
}
/* Skeleton Loader */
.skeleton-loader {
  background: linear-gradient(90deg, var(--bg-body) 25%, #f0eee9 50%, var(--bg-body) 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite linear;
}

.skeleton-pulse {
  animation: skeletonLoading 1.5s infinite linear, skeletonFadeIn 0.4s ease-out both;
}

.skeleton-row {
  animation: skeletonRowSlide 0.35s ease-out both;
}

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

@keyframes skeletonFadeIn {
  from { opacity: 0.3; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes skeletonRowSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}



.empty-state-td {
  padding: 40px 24px !important;
  text-align: center;
  background-color: var(--bg-surface);
  border-bottom: none !important;
  vertical-align: middle !important;
  height: 100%;
}

.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  animation: emptyStateFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.empty-state-illustration {
  width: 200px;
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}

.empty-state-text {
  text-align: center;
}

.empty-state-title {
  margin: 0 0 8px 0;
  color: var(--text-main);
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Carrois Gothic', sans-serif;
}

.empty-state-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
  max-width: 320px;
}

/* Illustration animations */
@keyframes emptyStateFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.empty-illust-float {
  animation: emptyIllustFloat 4s ease-in-out infinite;
}

@keyframes emptyIllustFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.empty-illust-dash {
  animation: emptyIllustDash 8s linear infinite;
}

@keyframes emptyIllustDash {
  to { stroke-dashoffset: -40; }
}

.empty-illust-sparkle {
  opacity: 0.35;
}
 
@keyframes emptyIllustSparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 0.45; transform: scale(1.15); }
}

/* Code Editor Block in Playground */
.code-editor-block {
  background-color: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Courier New', monospace;
  padding: 16px;
  border-radius: var(--border-radius);
  overflow-x: auto;
  border: 1px solid #333;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.code-editor-block code { color: var(--text-main); }
.code-editor-block .tag { color: var(--primary); }
.code-editor-block .attr { color: var(--primary-dark); }
.code-editor-block .val { color: var(--text-muted); }


/* Logo Styles from Multopia.de */
.sidebar-brand .logo {
  display: flex;
  align-items: center;
}
.sidebar-brand .logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  animation: pulse-logo 3.5s infinite ease-in-out;
  will-change: transform;
}
@keyframes pulse-logo {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 40%, transparent));
  }
}




@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}





.data-table-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Page entrance reveal animation */
.page-reveal {
  animation: pageReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle float animation for decorative elements */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Responsive: Tablet improvements */
@media (min-width: 769px) and (max-width: 992px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: Mobile improvements */
@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .kpi-card {
    min-height: 135px;
  }
  .page-title {
    font-size: 1.4rem;
  }
  .slide-overlay-panel {
    width: calc(100% - 20px);
    max-width: none;
    right: 10px;
    top: 10px;
    bottom: 10px;
  }
}

/* Custom Toast Notification System */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1055;
  pointer-events: none;
}
.toast {
  display: none;
  pointer-events: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-hard);
  padding: 16px;
  min-width: 300px;
  max-width: 400px;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.show {
  display: block;
}
.toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.toast-body {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.5;
}
@keyframes toastSlideIn {
  from {
    transform: translateY(24px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}



/* Custom dialog component styling */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog-backdrop.show {
  opacity: 1;
}

.dialog-panel {
  background: var(--bg-surface);
  border: 3px solid var(--text-main);
  border-radius: var(--border-radius);
  box-shadow: 8px 8px 0 var(--text-main);
  padding: 32px;
  width: 90%;
  max-width: 480px;
  transform: scale(0.9) rotate(-2deg);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'PT Sans', sans-serif;
}

.dialog-backdrop.show .dialog-panel {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

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

.dialog-header h3 {
  margin: 0;
  font-size: 1.35rem;
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: 700;
  color: var(--text-main);
}

.dialog-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--text-main);
  background: var(--primary-light);
  color: var(--primary);
}

.dialog-icon.danger {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}

.dialog-body {
  margin-bottom: 28px;
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.6;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Global Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.8);
}

/* Overview CTA Sticky Footer */
.overview-footer {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  padding: 16px 20px;
  margin-top: auto; /* Push to bottom if in flex */
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: var(--border-sketchy);
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.02);
}







/* --- View Toggle & Grid Layout --- */
.view-toggle-group {
  display: flex;
  background-color: var(--bg-section-alt);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-right: 12px;
}
.view-toggle-btn {
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-toggle-btn:hover {
  background-color: rgba(59, 59, 59, 0.05);
}
.view-toggle-btn.active {
  background-color: #fff;
  color: var(--primary);
  /* box-shadow: var(--shadow-sm); */
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 16px;
  width: 100%;
  padding: 8px 0;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}

.grid-card {
  display: flex;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  gap: 16px;
  align-items: flex-start;
}
.grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--primary);
}
.grid-card:active {
  transform: translateY(-2px) scale(0.99);
}

.grid-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(59, 59, 59, 0.2);
}

.grid-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.grid-card-title {
  font-family: 'Carrois Gothic', sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--text-main);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-card-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-card-footer {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Detailed card variant: header + body + info rows.
   Used by pages that show a label/value list instead of an icon
   (e.g. Warehouses, Subscriptions, Operations, Cortex object records).
   When a card contains a header, it must stack vertically instead of
   the default icon-beside-content row layout. */
.grid-card:has(.grid-card-header),
.grid-card:has(.grid-card-body) {
  flex-direction: column;
  gap: 12px;
}
.grid-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.grid-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.grid-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.35;
}
.grid-info-label {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.grid-info-value {
  color: var(--text-main);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Uniform Tab Buttons Override --- */
.tab-btn, .logs-tab-btn, .playground-tab-btn {
  padding: 12px 24px !important;
  font-size: 1.05rem !important;
  border: 1px solid var(--border-color) !important;
  border-bottom: none !important;
  border-top-left-radius: var(--border-radius-sm) !important;
  border-top-right-radius: var(--border-radius-sm) !important;
  background: #fff !important;
  cursor: pointer !important;
  font-family: 'Carrois Gothic', sans-serif !important;
  font-weight: bold !important;
  position: relative !important;
  bottom: -2px !important;
  z-index: 1 !important;
  color: var(--text-main) !important;
  transition: background 0.2s, color 0.2s !important;
}

.tab-btn.active, .logs-tab-btn.active, .playground-tab-btn.active {
  background: var(--bg-section-alt) !important;
  color: var(--primary) !important;
}

.tab-btn:hover:not(.active), .logs-tab-btn:hover:not(.active), .playground-tab-btn:hover:not(.active) {
  background: #f1f5f9 !important;
}

/* --- Danger Button (Redder) --- */
.btn-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    border-radius: 6px !important;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-danger:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-danger:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

.btn-danger svg {
    stroke: #ffffff !important;
}

/* Responsive Overview & Split Layout additions */
.split-layout-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px dashed rgba(59,59,59,0.15);
  padding-top: 16px;
}

@media (max-width: 992px) {
  .split-layout-content {
    flex-direction: column;
    align-items: stretch;
  }
  .split-layout-content > form {
    max-width: 100% !important;
  }
  .split-layout-content > div {
    position: static !important;
    width: 100% !important;
    min-width: unset !important;
  }
}

@media (max-width: 576px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .slide-overlay-panel {
    width: 100% !important;
    max-width: none !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
}

/* --- Searchable Select (Autocomplete) Control --- */
.searchable-select-wrapper {
  position: relative;
  width: 100%;
}

.searchable-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sketchy, 8px);
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 250px;
  overflow-y: auto;
  font-family: 'PT Sans', sans-serif;
}

.searchable-select-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px dashed rgba(59, 59, 59, 0.1);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.searchable-select-item:last-child {
  border-bottom: none;
}

.searchable-select-item:hover, .searchable-select-item.active {
  background-color: var(--primary-light, #FFF4E5);
  color: var(--primary, #FF8F2C);
}

.searchable-select-item-title {
  font-weight: bold;
  font-size: 14px;
}

.searchable-select-item-subtitle {
  font-size: 11px;
  color: var(--text-muted, #777);
}

.searchable-select-item:hover .searchable-select-item-subtitle, 
.searchable-select-item.active .searchable-select-item-subtitle {
  color: var(--primary, #FF8F2C);
}

.searchable-select-no-results {
  padding: 12px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
}

/* --- Responsive List View Container stretching --- */
#listViewContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  width: 100%;
}

#listViewContainer:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
}

/* --- Global Standardized Detail Page Utilities --- */
.header-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}
.header-actions-group.hidden {
  display: none !important;
}
.hidden {
  display: none !important;
}
.list-view-container.hidden {
  display: none !important;
}
.list-view-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border: 1px solid var(--border-color);
  padding: 24px;
}
.form-view-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  padding-bottom: 40px;
  gap: 24px;
}
.form-view-container.hidden {
  display: none;
}
.slide-overlay-panel > button.btn-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 30px !important;
}






/* --- Silhouette Card Object Selector --- */
.silhouette-card-selector {
  display: block;
  width: 100%;
  cursor: pointer;
  border: 2px dashed rgba(59, 59, 59, 0.3);
  border-radius: var(--radius-sketchy, 255px 15px 225px 15px/15px 225px 15px 255px);
  background-color: #fcfcfc;
  padding: 16px;
  transition: var(--transition);
  min-height: 80px;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.silhouette-card-selector:hover {
  border-color: var(--primary);
  background-color: #ffffff;
  box-shadow: var(--shadow);
}

.silhouette-card-selector .selector-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.silhouette-card-selector .search-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
  opacity: 0.7;
  transition: var(--transition);
}

.silhouette-card-selector:hover .search-icon {
  opacity: 1;
  transform: scale(1.1);
}

.silhouette-card-selector .selector-placeholder {
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.silhouette-card-selector.filled {
  border-style: solid;
  border-color: rgba(59, 59, 59, 0.2);
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.silhouette-card-selector.filled:hover {
  border-color: var(--primary);
}

.silhouette-card-selector.filled .selector-content {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.silhouette-card-selector.filled .selected-text {
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: var(--text-main);
}

.silhouette-card-selector.filled .selected-subtitle {
  font-family: 'PT Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
}

.silhouette-card-selector.filled .change-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

/* Object Selector Offcanvas List Styles */
.object-selector-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

.object-selector-offcanvas .offcanvas-body {
  padding: 0;
  background-color: var(--bg-body);
}

.object-selector-search {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.object-selector-list {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.object-selector-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sketchy, 255px 15px 225px 15px/15px 225px 15px 255px);
  padding: 16px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.object-selector-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.object-selector-item .item-title {
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 4px;
}

.object-selector-item .item-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Picker Mode (Iframe Selection) --- */
html.picker-mode,
body.picker-mode {
  background: #ffffff !important;
}

body.picker-mode .erp-sidebar,
body.picker-mode .erp-header,
body.picker-mode .page-header,
body.picker-mode .toolbar-right button.btn-primary,
body.picker-mode #customerHeaderActions,
body.picker-mode #orderHeaderActions,
body.picker-mode #subscriptionHeaderActions,
body.picker-mode #projectHeaderActions,
body.picker-mode #btnPrintTable,
body.picker-mode #btnExportTable {
  display: none !important;
}

body.picker-mode .erp-main {
  margin-left: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

body.picker-mode .erp-content {
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

/* Force desktop layout for toolbar even if iframe is narrow */
body.picker-mode .table-toolbar {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

body.picker-mode .toolbar-left {
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
}

body.picker-mode .table-filter {
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
}

body.picker-mode .toolbar-left > *, 
body.picker-mode .table-filter > *, 
body.picker-mode .table-search {
  width: auto !important;
  max-width: none !important;
}

body.picker-mode .list-view-container {
  padding: 0 !important;
  height: 100vh;
  overflow-y: auto;
  border: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

body.picker-mode .data-table-card {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

body.picker-mode .table-toolbar {
  margin-bottom: 8px !important;
}

body.picker-mode .data-table tbody tr {
  cursor: pointer;
}
body.picker-mode .data-table tbody tr:hover {
  background-color: rgba(67, 97, 238, 0.05);
}

.object-selector-offcanvas .slide-overlay-panel {
  background: #ffffff !important;
}

/* --- Universal Tabs (Abo Design) --- */
.mt-tabs-header {
    display: flex;
    border-bottom: 1px dashed rgba(59,59,59,0.15);
    background: var(--bg-section-alt);
    overflow-x: auto;
    /* Steht das Band in einer Flex-Spalte fester Höhe, darf ein hoher
       Reiterinhalt es nicht plattdrücken. */
    flex-shrink: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.mt-tab {
    padding: 12px 24px;
    text-align: center;
    cursor: pointer;
    font-family: 'Carrois Gothic', sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background 0.1s;
    border: none;
    border-right: 1px dashed rgba(59,59,59,0.15);
    border-bottom: 3px solid transparent;
    color: var(--text-main);
    white-space: nowrap;
    background: transparent;
}

/* Badges & Labels Styling */
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .badge.success {
    background-color: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3);
  }
  .badge.warning {
    background-color: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.3);
  }
  .badge.danger {
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
  }
  .badge.info {
    background-color: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.3);
  }
  .badge.primary {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  }
  .badge.neutral {
    background-color: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
    border-color: rgba(149, 165, 166, 0.3);
  }
  .badge.outline {
    background-color: transparent;
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Custom dialog component styling */

.mt-tab:hover {
    background: #fdfdfd;
}

.mt-tab.active {
    background: #fff;
    border-bottom-color: var(--primary) !important;
    color: var(--primary);
}

.mt-tab-content {
    display: none;
}

.mt-tab-content.active {
    display: flex;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }



/* User Fix: Ensure list views take full width */
.list-view-container { max-width: none !important; }
.erp-content { max-width: none !important; }


/* Global Flatpickr Styling to match other inputs */
input.flatpickr-input[type="text"] {
    padding: 8px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sketchy) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: #fff !important;
    color: var(--text-main) !important;
    box-sizing: border-box !important;
    height: auto !important;
    outline: none !important;
}
input.flatpickr-input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25) !important;
}




/* ==========================================================================
   Listen-Feinschliff  (nova-sketch.js + NovaTable)
   1. Handgezeichnete Leeransichten
   2. Manuell verstellbare Spaltenbreiten
   3. Zurückhaltende Bewegungs-Details
   Alles am Ende der Datei, damit die Basis-Regeln unverändert bleiben.
   ========================================================================== */

:root {
  /* Graphit-Töne der Skizzen. Die Hauptlinien sind absichtlich nicht schwarz,
     sondern ein weicher Bleistiftgrau-Ton; Akzente greifen die CI-Farbe auf. */
  --sketch-ink: color-mix(in srgb, var(--text-main) 74%, transparent);
  --sketch-ink-soft: color-mix(in srgb, var(--text-main) 40%, transparent);
  --sketch-accent: var(--primary);
}

/* --------------------------------------------------------------------------
   1. Leeransichten
   -------------------------------------------------------------------------- */

.nova-sketch {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

/* In der Kartenansicht ist mehr Fläche da - dort darf sie größer sein. */
.empty-state-grid-cell .nova-sketch {
  max-width: 280px;
}

.empty-state-illustration.nova-sketch {
  opacity: 1;
}

/* Der Strich "wächst" von links nach rechts, statt einfach da zu sein. */
.nova-sketch .sk-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: novaSketchDraw 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) both;
  animation-delay: var(--sd, 0s);
}

@keyframes novaSketchDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* Punkte und Sternchen werden nicht gezogen, sondern pulsieren leise weiter.
   Bewusst nur `transform` animiert - die Deckkraft steckt als SVG-Attribut
   direkt am Element und darf nicht überschrieben werden. */
.nova-sketch .sk-twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: novaSketchTwinkle 3s ease-in-out infinite both;
  animation-delay: var(--sd, 0s);
}

@keyframes novaSketchTwinkle {
  0%, 100% { transform: scale(0.85); }
  50%      { transform: scale(1.25); }
}

/* Nach dem Zeichnen atmet die ganze Skizze ganz leicht. */
.nova-sketch .sk-float {
  transform-box: view-box;
  transform-origin: 50% 55%;
  /* Startet erst, wenn der letzte Strich gezeichnet ist. */
  animation: novaSketchBreathe 5s ease-in-out 1.2s infinite;
}

@keyframes novaSketchBreathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-0.5deg); }
}

/* Leeransicht in der Kartenansicht: überspannt das gesamte Raster
   und nimmt die volle Höhe, damit sie mittig darin sitzt.
   `.data-grid` schiebt Karten normalerweise nach oben (align-content: start) -
   enthält es nur die Leeransicht, darf die Zeile die ganze Höhe füllen. */
.data-grid:has(> .empty-state-grid-cell) {
  /* `grid-auto-rows: min-content` würde die Zeile auf Inhaltshöhe zwingen -
     für die Leeransicht soll sie die verfügbare Höhe einnehmen. */
  grid-auto-rows: auto;
  align-content: stretch;
  padding: 0;
}

.empty-state-grid-cell {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  min-height: 340px;
  height: 100%;
}

.empty-state-container {
  gap: 18px;
}

/* --- Senkrechte Zentrierung in der Tabelle ---
   Ohne Zeilen ist die Tabelle nur so hoch wie ihr Inhalt, dadurch klebte die
   Leeransicht am oberen Rand. Bei leerer Liste (Klasse von NovaTable gesetzt)
   streckt sich die Tabelle auf die Containerhöhe und `vertical-align: middle`
   der Zelle greift endlich. */
.data-table.is-empty {
  height: 100%;
}

.data-table.is-empty tbody {
  height: 100%;
}

/* Selektor bewusst mit `.data-table td` davor: die Basisregel erzwingt
   nowrap + overflow:hidden fürs Kürzen von Zellinhalten und ist spezifischer
   als `.empty-state-td` allein. In der Leeransicht würden dadurch längere
   Titel und Untertitel abgeschnitten statt umzubrechen. */
.data-table td.empty-state-td {
  height: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.data-table.is-empty .empty-state-container {
  /* etwas Luft, damit die Zeichnung nicht am Tabellenkopf klebt */
  padding: 8px 0;
}

.empty-state-title {
  animation: emptyStateTextIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.empty-state-subtitle {
  animation: emptyStateTextIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.87s both;
}

.empty-state-action {
  animation: emptyStateTextIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

@keyframes emptyStateTextIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   2. Spaltenbreiten per Maus verstellen
   -------------------------------------------------------------------------- */

/* Platz für den Ziehgriff, damit er die Drag-Punkte nicht überdeckt. */
.data-table th.sortable-th.is-resizable {
  padding-right: 18px;
}

.data-table .th-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 11px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  touch-action: none;
}

.col-resize-grip {
  width: 2px;
  height: 60%;
  border-radius: 2px;
  background-color: rgba(59, 59, 59, 0.18);
  opacity: 0;
  transform: scaleY(0.55);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
  pointer-events: none;
}

.data-table th:hover .col-resize-grip,
.col-resize-handle:hover .col-resize-grip {
  opacity: 1;
  transform: scaleY(1);
}

.col-resize-handle:hover .col-resize-grip {
  width: 3px;
  height: 78%;
  background-color: var(--primary);
}

.col-resize-handle:focus-visible {
  outline: none;
}
.col-resize-handle:focus-visible .col-resize-grip {
  opacity: 1;
  width: 3px;
  height: 82%;
  background-color: var(--primary);
  transform: scaleY(1);
}

/* Aktive Spalte während des Ziehens klar markieren. */
.data-table th.sortable-th.is-resizing {
  background-color: var(--primary-light);
}
.data-table th.sortable-th.is-resizing .col-resize-grip {
  opacity: 1;
  width: 3px;
  height: 100%;
  transform: scaleY(1);
  background-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Während des Ziehens darf nichts markiert werden und der Cursor bleibt gleich. */
body.nova-col-resizing,
body.nova-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Beim Ziehen die Zeilen-Hover-Effekte stilllegen - sonst zappelt die Tabelle. */
.data-table.is-resizing tbody tr,
.data-table.is-resizing tbody tr:hover {
  transform: none;
  transition: none;
  background-color: transparent;
}

/* Sobald eigene Breiten gesetzt sind, darf die Tabelle über den sichtbaren
   Bereich hinauswachsen; der Container scrollt dann horizontal.
   Die konkrete Breite setzt NovaTable per Inline-Style (Summe der Spalten). */
.data-table.has-manual-widths {
  max-width: none;
}

/* Waagerechte Scrollleiste der Listen ausblenden. Sie belegte eine eigene
   Layoutzeile und blitzte beim Seitenaufruf kurz auf. Gescrollt werden kann
   weiterhin - per Mausrad/Trackpad (Shift+Rad), Touch oder Tastatur.
   Die senkrechte Leiste bleibt bewusst sichtbar. */
.data-table-container::-webkit-scrollbar:horizontal {
  height: 0;
  background: transparent;
}
.data-table-container {
  scrollbar-gutter: auto;
  overscroll-behavior-x: contain;
}

/* Zurücksetzen-Schaltfläche: liegt als Overlay über dem nicht scrollenden
   Tabellen-Wrapper und bleibt deshalb immer am rechten Rand sichtbar - auch
   wenn die Spalten breiter als der Container sind und waagerecht gescrollt wird.
   Die senkrechte Position (top) setzt NovaTable passend zur Kopfzeile. */
.btn-col-reset {
  position: absolute;
  right: 6px;
  z-index: 6;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.6;
  box-shadow: -6px 0 8px -4px var(--bg-surface), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-col-reset:hover,
.btn-col-reset:focus-visible {
  opacity: 1;
  color: var(--primary);
  border-color: var(--primary);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3. Bewegungs-Details
   -------------------------------------------------------------------------- */

/* Zeilen laufen gestaffelt ein (--row-i wird von NovaTable gesetzt). */
.data-table tbody tr.fade-in-row {
  animation: rowEntrance 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--row-i, 0) * 26ms);
}

/* Gleiches Prinzip für die Kartenansicht - rein über CSS, ohne JS-Eingriff. */
.data-grid > .grid-card {
  animation: gridCardEntrance 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.data-grid > .grid-card:nth-child(1)  { animation-delay: 0ms; }
.data-grid > .grid-card:nth-child(2)  { animation-delay: 35ms; }
.data-grid > .grid-card:nth-child(3)  { animation-delay: 70ms; }
.data-grid > .grid-card:nth-child(4)  { animation-delay: 105ms; }
.data-grid > .grid-card:nth-child(5)  { animation-delay: 140ms; }
.data-grid > .grid-card:nth-child(6)  { animation-delay: 175ms; }
.data-grid > .grid-card:nth-child(7)  { animation-delay: 210ms; }
.data-grid > .grid-card:nth-child(8)  { animation-delay: 245ms; }
.data-grid > .grid-card:nth-child(n+9) { animation-delay: 280ms; }

@keyframes gridCardEntrance {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sortierte Spalte: der Pfeil sitzt im Label, hier nur die Fläche betonen. */
.sortable-th.sorted {
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* Umschalter Liste/Karten: der aktive Zustand rastet leicht ein. */
.view-toggle-btn {
  position: relative;
}
.view-toggle-btn svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.view-toggle-btn:active svg {
  transform: scale(0.88);
}
.view-toggle-btn.active svg {
  transform: scale(1.06);
}

/* Seitenzahlen: minimaler Lift, damit Klicks spürbar sind. */
.page-btn {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, color 0.18s ease;
}
.page-btn:not(.disabled):not(.active):hover {
  transform: translateY(-1px);
}
.page-btn:not(.disabled):active {
  transform: translateY(0) scale(0.96);
}

/* --------------------------------------------------------------------------
   Rücksicht auf Nutzer, die Animationen abgeschaltet haben
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nova-sketch .sk-draw {
    stroke-dashoffset: 0;
    animation: none;
  }
  .nova-sketch .sk-twinkle,
  .nova-sketch .sk-float,
  .empty-state-container,
  .empty-state-title,
  .empty-state-subtitle,
  .empty-state-action,
  .data-table tbody tr.fade-in-row,
  .data-grid > .grid-card {
    animation: none !important;
  }
  .view-toggle-btn svg,
  .page-btn {
    transition: none;
  }
}

/* Im Druck keine Ziehgriffe und keine Animationen. */
@media print {
  .col-resize-handle,
  .btn-col-reset {
    display: none !important;
  }
  .nova-sketch .sk-draw {
    stroke-dashoffset: 0;
    animation: none;
  }
  .nova-sketch .sk-float,
  .nova-sketch .sk-twinkle {
    animation: none;
  }
  table.has-selected-rows tbody tr:not(.selected-row) {
    display: none !important;
  }
  .nova-multi-action-bar,
  .print-hide {
    display: none !important;
  }
}

/* ===== Column Resize Handles ===== */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-resize-grip {
  width: 2px;
  height: 55%;
  background-color: var(--text-muted);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease, width 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
}
.data-table th:hover .col-resize-grip,
.col-resize-handle:hover .col-resize-grip {
  opacity: 1;
  transform: scaleY(1);
}
.col-resize-handle:hover .col-resize-grip {
  width: 3px;
  height: 78%;
  background-color: var(--primary);
}
.col-resize-handle:focus-visible {
  outline: none;
}
.col-resize-handle:focus-visible .col-resize-grip {
  opacity: 1;
  width: 3px;
  height: 82%;
  background-color: var(--primary);
  transform: scaleY(1);
}

/* Aktive Spalte waehrend des Ziehens */
.data-table th.sortable-th.is-resizing {
  background-color: var(--primary-light);
}
.data-table th.sortable-th.is-resizing .col-resize-grip {
  opacity: 1;
  width: 3px;
  height: 100%;
  transform: scaleY(1);
  background-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Waehrend des Ziehens */
body.nova-col-resizing,
body.nova-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.data-table.is-resizing tbody tr,
.data-table.is-resizing tbody tr:hover {
  transform: none;
  transition: none;
  background-color: transparent;
}

/* Eigene Spaltenbreiten */
.data-table.has-manual-widths {
  max-width: none;
}

/* Scrollbar */
.data-table-container::-webkit-scrollbar:horizontal {
  height: 0;
  background: transparent;
}
.data-table-container {
  scrollbar-gutter: auto;
  overscroll-behavior-x: contain;
}

/* Reset-Button */
.btn-col-reset {
  position: absolute;
  right: 6px;
  z-index: 6;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.6;
  box-shadow: -6px 0 8px -4px var(--bg-surface), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-col-reset:hover,
.btn-col-reset:focus-visible {
  opacity: 1;
  color: var(--primary);
  border-color: var(--primary);
  transform: rotate(-45deg);
}

/* ===== Multi Action Bar ===== */
.nova-multi-action-bar {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color);
  padding: 12px 24px;
  border-radius: var(--border-radius-lg, 8px);
  box-shadow: 0 8px 32px rgba(17, 24, 39, 0.15);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nova-multi-action-bar.show {
  bottom: 32px;
}
.nova-multi-action-bar .mab-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nova-multi-action-bar .mab-count {
  font-weight: 600;
  color: var(--text-main, #333);
  background: var(--bg-body, #f3f4f6);
  padding: 4px 12px;
  border-radius: var(--border-radius-sm, 4px);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}
.nova-multi-action-bar .mab-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   Überblicksseiten der Apps (Cortex, Plesk)
   Aufbau: Aufmacher mit Bleistiftzeichnung, Kennzahlenreihe, darunter zwei
   Spalten aus Listen und Schnellzugriffen. Alles bleibt im Skizzen-Look -
   weißes Papier, harter Versatzschatten, gestrichelte Hilfsrahmen.
   ========================================================================== */

.ov-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Platz rechts für die Scrollleiste, unten für den letzten Versatzschatten. */
  padding: 2px 10px 32px 2px;
}

/* Die Seite ist ein Flex-Container mit fester Höhe - ohne diese Sperre würde
   sie die Blöcke stauchen, statt sie scrollen zu lassen (der Aufmacher hätte
   dann seine Zeichnung abgeschnitten). */
.ov-page > * {
  flex-shrink: 0;
}

.ov-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}

/* --- Aufmacher ---------------------------------------------------------- */

.ov-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: center;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}

/* Kariertes Notizpapier hinter dem Aufmacher - sehr blass, rein atmosphärisch. */
.ov-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(59, 59, 59, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 59, 59, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.ov-hero > * {
  position: relative;
}

.ov-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}

/* Gestrichelter Auslauf - wie mit dem Lineal nachgezogen. */
.ov-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 45%, transparent) 0 6px,
    transparent 6px 12px
  );
}

.ov-title {
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 2rem;
  line-height: 1.15;
  margin: 14px 0 0;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.ov-lead {
  margin: 14px 0 0;
  max-width: 54ch;
  line-height: 1.7;
  color: var(--text-muted);
}

.ov-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ov-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ov-hero-art .nova-sketch {
  max-width: 360px;
}

/* --- Kennzahlen --------------------------------------------------------- */

.ov-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.ov-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ov-kpi:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 rgba(59, 59, 59, 0.1);
}

/* Der Rahmen um das Zeichen ist gestrichelt - er soll wie eine Bleistiftnotiz
   wirken, nicht wie ein gesetztes Element. */
.ov-kpi-mark {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.ov-kpi-value {
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.ov-kpi-value.is-small {
  font-size: 1.05rem;
  line-height: 1.25;
}

.ov-kpi-label {
  margin-top: 7px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Zwei Spalten ------------------------------------------------------- */

.ov-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ov-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ov-section-title {
  margin: 0;
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-main);
}

.ov-section-hint {
  margin: 6px 0 20px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Liste (Server, Inhaltsobjekte) ------------------------------------- */

.ov-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ov-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--text-main) 22%, transparent);
  background: var(--bg-section-alt);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ov-item:hover {
  transform: translateX(3px);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.ov-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

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

.ov-item-title {
  font-weight: 600;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.ov-item-meta {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.ov-item-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--primary-dark);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.ov-empty {
  padding: 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  border: 1.5px dashed color-mix(in srgb, var(--text-main) 18%, transparent);
}

/* --- Schnellzugriff-Kacheln --------------------------------------------- */

.ov-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.ov-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 14px;
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--text-main) 22%, transparent);
  background: var(--bg-surface);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ov-tile:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

/* Die Zeichnungen sind auf den Kacheln bewusst klein - sie wirken als
   Erkennungszeichen, nicht als Bild. */
.ov-tile .nova-sketch {
  max-width: 104px;
}

.ov-tile-label {
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--text-main);
}

.ov-tile-hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- Steckbrief (Schlüssel/Wert) ---------------------------------------- */

.ov-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ov-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 0.88rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--text-main) 16%, transparent);
}

.ov-fact:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ov-fact dt {
  color: var(--text-muted);
  white-space: nowrap;
}

.ov-fact dd {
  margin: 0;
  font-family: monospace;
  font-weight: 600;
  color: var(--text-main);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Handschriftliche Randnotiz am Fuß einer Karte. */
.ov-note {
  margin-top: 18px;
  padding-left: 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
}

.ov-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: 1px;
}

.ov-dot.is-on { background: #10b981; }
.ov-dot.is-warn { background: var(--warning); }
.ov-dot.is-off { background: #d1d5db; }

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 1200px) {
  .ov-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ov-hero {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  /* Zuerst die Zeichnung, dann der Text - auf schmalen Fenstern trägt das Bild. */
  .ov-hero-art {
    order: -1;
  }
  .ov-hero-art .nova-sketch {
    max-width: 260px;
  }
  .ov-title {
    font-size: 1.6rem;
  }
}