/*
 * Stylesheets of today's Octoserv, copied unchanged from octoserv/assets/css (core 2.73.2,
 * commit 6b83166e) and loaded in the order of includes/class-octo-frontend.php: page
 * stylesheets first, then frontend.css and octo-help (wp_enqueue_scripts), then octo-komponenten, octo-buttons, octo-utilities and octo-theme last
 * (the colour roles override every other stylesheet). Do not edit the copies; changes belong
 * into today's core first and are copied again.
 */
/**
 * DCS-SalesHub Dashboard Styles
 * Sidebar Navigation & Main Content Layout
 * 
 * @package DCS_SalesHub
 * @since 1.0.0
 */

/* Remove WordPress Admin Bar margin */
html {
	margin-top: 0 !important;
}

/* ============================================
   Base Styles
   ============================================ */
.octo-dashboard {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: var(--octo-c-page, #f3f4f6);
	color: var(--octo-c-text, #111827);
}

/* Override WordPress theme body font-weight */
body.octo-dashboard,
body.octo-dashboard * {
	font-weight: 400 !important;
}

/* ============================================
   Layout Container
   ============================================ */
.octo-container {
	display: flex;
	min-height: 100vh;
	width: 100%;
}

/* ============================================
   Sidebar Navigation
   ============================================ */
.octo-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 260px;
	height: 100vh;
	background: var(--octo-c-sidebar, #1f2937);
	color: var(--octo-c-on-dark, #f9fafb);
	display: flex;
	flex-direction: column;
	z-index: 1000;
	overflow-y: auto;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Sidebar Header */
.octo-sidebar-header {
	padding: var(--octo-nav-head-pad, 2rem 0.8rem);
	background: var(--octo-c-card, #ffffff);
	border-bottom: 1px solid var(--octo-c-text, #111827);
	text-align: center;
}

.octo-logo {
	max-width: 100%;
	max-height: var(--octo-nav-logo, 50px);
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
	object-fit: contain;
}

.octo-logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--octo-c-on-dark, #f9fafb);
	margin: 0;
}

/* Navigation */
.octo-nav {
	flex: 1;
	padding: 1rem 0;
}

.octo-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.octo-nav-item {
	margin: 0;
	padding: 0;
}

/* Navigationsmasse folgen der Anzeigedichte (siehe --octo-nav-* weiter unten).
   Bei vielen Punkten wird die Leiste sonst laenger als der Bildschirm. */
.octo-nav-link {
	display: flex;
	align-items: center;
	padding: var(--octo-nav-pad, 0.875rem 1.5rem);
	color: var(--octo-c-border, #e5e7eb);
	text-decoration: none;
	font-size: var(--octo-nav-size, 0.9375rem);
	font-weight: 500;
	transition: all 0.2s;
	border-left: 3px solid transparent;
}

.octo-nav-link:hover {
	background: var(--octo-c-sidebar-hover, #374151);
	color: var(--octo-c-on-dark, #f9fafb);
	border-left-color: #e09000;
}

.octo-nav-item.active .octo-nav-link {
	background: #2d3a4a;
	color:var(--octo-c-on-dark, #ffffff);
	border-left-color: #e09000;
	border-left-width: 4px;
}

.octo-nav-link .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	margin-right: 0.75rem;
	flex-shrink: 0;
}

.octo-nav-text {
	flex: 1;
}

.octo-nav-arrow {
	margin-left: auto;
	font-size: 0.875rem;
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.octo-nav-item-has-submenu.open .octo-nav-arrow {
	transform: rotate(180deg);
}

/* Submenu */
.octo-nav-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--octo-c-sidebar-sub, #111827);
}

.octo-nav-item-has-submenu.open .octo-nav-submenu {
	max-height: 1200px;
}

.octo-nav-submenu-item {
	margin: 0;
	padding: 0;
}

.octo-nav-submenu-link {
	display: flex;
	align-items: center;
	padding: var(--octo-nav-sub-pad, 0.75rem 1.5rem 0.75rem 3.5rem);
	color: var(--octo-c-sidebar-text, #d1d5db);
	text-decoration: none;
	font-size: var(--octo-nav-sub-size, 0.875rem);
	font-weight: 500;
	transition: all 0.2s;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.octo-nav-submenu-link:hover {
	background: var(--octo-c-sidebar-hover, #374151);
	color: var(--octo-c-on-dark, #f9fafb);
}

/* Der aktive Eintrag steht auf #1a2535 - einer Flaeche, die in beiden
   Schemata dunkel ist. Ein ueber --octo-ink gemischter Ton wird dort im
   Hellmodus dunkel und verschwindet (gemessen: 3.38). Deshalb ein fester
   heller Orangeton, der zum Rand links passt. */
.octo-nav-submenu-item.active .octo-nav-submenu-link {
	background: #1a2535;
	color:color-mix(in srgb, #f0b652 var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 600;
	border-left: 3px solid #e09000;
}

.octo-nav-submenu-link .dashicons {
	font-size: var(--octo-nav-sub-icon, 16px);
	width: var(--octo-nav-sub-icon, 16px);
	height: var(--octo-nav-sub-icon, 16px);
	margin-right: 0.5rem;
}

/* Submenu group (pinning: "Weitere Ansichten" nested dropdown) */
.octo-nav-submenu-group > .octo-nav-submenu-group-toggle {
	justify-content: flex-start;
}

.octo-nav-submenu-group-arrow {
	margin-left: auto;
	font-size: 14px;
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.octo-nav-submenu-group.open > .octo-nav-submenu-group-toggle .octo-nav-submenu-group-arrow {
	transform: rotate(180deg);
}

.octo-nav-submenu-nested {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: #0d1117;
}

.octo-nav-submenu-group.open .octo-nav-submenu-nested {
	max-height: 900px;
}

.octo-nav-submenu-link-nested {
	padding-left: 4.5rem;
}

/* Icon Buttons */
.octo-icon-btn {
	background: var(--octo-c-page, #f3f4f6);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 4px;
	padding: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--octo-c-muted, #4b5563);
}

.octo-icon-btn:hover {
	background: var(--octo-c-border, #e5e7eb);
	border-color: var(--octo-c-muted, #6b7280);
	color: var(--octo-c-text, #111827);
}

.octo-icon-btn-danger {
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-icon-btn-danger:hover {
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
	border-color:color-mix(in srgb, #fca5a5 var(--octo-tint, 100%), var(--octo-c-border));
	color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-btn-link {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	transition: all 0.2s;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ============================================
   Hovercard (Contacts list quick info)
   ============================================ */
.octo-hovercard {
  background: var(--octo-c-card, #ffffff);
  border: 1px solid var(--octo-c-border, #e5e7eb);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  border-radius: 0.5rem;
  min-width: 240px;
  max-width: 320px;
  padding: 0.75rem;
}

.octo-hovercard-content {
  font-size: 0.8rem;
  color: var(--octo-c-text, #111827);
  line-height: 1.4;
}

.octo-hovercard-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0 8px;
}

.octo-hovercard-row {
  margin-bottom: 0.25rem;
}

.octo-hovercard-row a {
  color: color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text));
  text-decoration: none;
}

.octo-hovercard-row a:hover {
  text-decoration: underline;
}

.octo-muted { color: var(--octo-c-muted, #6b7280); }

/* Two-column grid for hovercard fields */
.octo-hovercard-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}
.octo-hovercard-label {
  color: var(--octo-c-muted, #4b5563); /* darker than .octo-muted */
}
.octo-hovercard-value a {
  color: inherit;
  text-decoration: none;
}
.octo-hovercard-value a:hover {
  text-decoration: underline;
}

.octo-hovercard-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0 8px;
}

/* Interactive marker for last name hover target */
.octo-contact-lastname {
  cursor: pointer;
}

/* Hovercard buttons with requested colors */
.octo-hovercard .octo-btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  color: var(--octo-c-on-dark, #ffffff);
  width: 100%;
}

.octo-hovercard .octo-hc-open {
  background: var(--octo-c-accent, #e09000);
}
.octo-hovercard .octo-hc-open:hover {
  filter: brightness(0.95);
}

.octo-hovercard .octo-hc-note {
  background: #003450;
}
.octo-hovercard .octo-hc-note:hover {
  filter: brightness(1.1);
}

.octo-hovercard .octo-hc-task {
  background: #006899;
}
.octo-hovercard .octo-hc-task:hover {
  filter: brightness(1.1);
}

.octo-btn-link:hover {
	background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card));
	color:color-mix(in srgb, #b26205 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-btn-link .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Create View Button */
.octo-sidebar-create-view {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--octo-c-text, #111827);
}

/* ============================================
   Sidebar Icon-Trio (2.3.11)
   Dezente Kacheln in Octo-Markenfarben statt fetter Balken.
   Orange #E09000 (Neu), Blau #006B95 (Daten), Hellblau #4FA5C9 (Mobile).
   Drittes Icon nur bei can_manage_mobile_views (PHP-Guard, siehe list.php).
   Farben aus central-memory/references/brand_colors.md.
   ============================================ */
.octo-sidebar-icon-trio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
}
.octo-sidebar-icon-trio.has-mobile {
	grid-template-columns: 1fr 1fr 1fr;
}

.octo-sidebar-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 6px;
	border: none;
	border-radius: 6px;
	color: var(--octo-c-on-dark, #ffffff);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
	min-height: 58px;
	width: 100%;
}
.octo-sidebar-tile:hover {
	filter: brightness(0.92);
}
.octo-sidebar-tile:active {
	filter: brightness(0.82);
	transform: translateY(1px);
}
.octo-sidebar-tile:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--octo-c-card, #ffffff) 60%, transparent);
	outline-offset: 2px;
}

.octo-sidebar-tile-icon {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
}
/* Die Beschriftung richtet sich nach der Kachelfarbe, nicht nach dem Schema:
   Die Kacheln sind in beiden Modi gleich gefaerbt.
     weiss auf #e09000  2.57   dunkel  7.22
     weiss auf #4FA5C9  2.78   dunkel  6.69
     weiss auf #006B95  5.94   dunkel  3.13   <- hier bleibt weiss richtig */
.octo-sidebar-tile-label {
	display: block;
	white-space: nowrap;
	color: var(--octo-c-on-dark, #ffffff);
}


/* Farbige Basis der einzelnen Kacheln (Octo-Marke) */
.octo-sidebar-tile--new    { background: var(--octo-c-accent, #e09000); }
.octo-sidebar-tile--data   { background: #006B95; }
.octo-sidebar-tile--mobile { background: #4FA5C9; }

/* ============================================
   Mobile-Views-Modal (2.3.11)
   ============================================ */
#octo-mobile-views-modal .octo-modal-close { font-size: 24px; line-height: 1; }
.octo-mobile-views-hint {
	margin: 0 0 1rem;
	padding: 10px 12px;
	background: rgba(79, 165, 201, 0.08);
	border-left: 3px solid #4FA5C9;
	border-radius: 4px;
	font-size: 0.8125rem;
	color: var(--octo-c-text, #111827);
}
.octo-mobile-views-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.octo-mobile-views-list-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 10px 12px;
	background: var(--octo-c-card-head, #f9fafb);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 6px;
}
.octo-mobile-views-list-item .octo-mvli-icon {
	color:color-mix(in srgb, #4FA5C9 var(--octo-ink, 100%), var(--octo-c-text));
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.octo-mobile-views-list-item .octo-mvli-name {
	flex: 1;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.octo-mobile-views-list-item .octo-mvli-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.octo-mobile-views-list-item .octo-mvli-btn {
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	color: var(--octo-c-text, #111827);
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1.2;
	transition: all 0.15s;
}
.octo-mobile-views-list-item .octo-mvli-btn:hover {
	border-color: var(--octo-c-muted, #6b7280);
	background: var(--octo-c-page, #f3f4f6);
}
.octo-mobile-views-list-item .octo-mvli-btn--open   { color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); border-color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-mobile-views-list-item .octo-mvli-btn--open:hover   { background: rgba(0, 107, 149, 0.08); }
.octo-mobile-views-list-item .octo-mvli-btn--edit   { color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); border-color: #E09000; }
.octo-mobile-views-list-item .octo-mvli-btn--edit:hover   { background: rgba(224, 144, 0, 0.08); }
.octo-mobile-views-list-item .octo-mvli-btn--delete { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); border-color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-mobile-views-list-item .octo-mvli-btn--delete:hover { background: rgba(185, 28, 28, 0.08); }
.octo-mobile-views-empty {
	margin: 1rem 0 0;
	text-align: center;
	color: var(--octo-c-muted, #6b7280);
	font-style: italic;
}


.octo-btn-create-view {
	width: 100%;
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	border: 1px solid #e09000;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.octo-btn-create-view:hover {
	background: #c27a00;
	border-color: #c27a00;
}

.octo-btn-create-view .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-btn-full-width {
	width: 100%;
	margin-top: 0.5rem;
}

/* Mobile Indicator Icon in Box Headers (Spalten only) */
.octo-mobile-indicator {
	font-size: 18px;
	width: 18px;
	height: 18px;
	margin-left: auto;
	margin-right: 8px;
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
}

/* Mobile disabled (red) - always visible */
.octo-mobile-indicator[data-mobile="false"] {
	color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)) !important;
	opacity: 1;
}

.octo-mobile-indicator[data-mobile="false"]:hover {
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)) !important;
	transform: scale(1.15);
}

/* Mobile enabled (green) - always visible */
.octo-mobile-indicator[data-mobile="true"] {
	color:color-mix(in srgb, #0c875e var(--octo-ink, 100%), var(--octo-c-text)) !important;
	opacity: 1;
}

.octo-mobile-indicator[data-mobile="true"]:hover {
	color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)) !important;
	transform: scale(1.15);
}

/* Sidebar Footer */
.octo-sidebar-footer {
	padding: 1.5rem;
	border-top: 1px solid var(--octo-c-text, #111827);
}

.octo-user-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.octo-user-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-on-dark, #f9fafb);
}

.octo-logout {
	font-size: 0.875rem;
	color: var(--octo-c-sidebar-text, #d1d5db);
	text-decoration: none;
	transition: color 0.2s;
}

.octo-logout:hover {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Main Content Area
   ============================================ */
.octo-main {
	flex: 1;
	min-width: 0;
	margin-left: 260px;
	padding: 2rem;
	min-height: 100vh;
	background: var(--octo-c-page, #f3f4f6);
	box-sizing: border-box;
}

.octo-content {
	/* Removed max-width for fully responsive layout */
	margin: 0;
	width: 100%;
	min-width: 0;
}

.octo-content h1 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--octo-c-text, #111827);
	margin: 0 0 2rem 0;
}

/* ============================================
   Dashboard Widgets
   ============================================ */
.octo-dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    /* margin-top: 1rem; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}
@media (max-width: 900px) {
    .octo-dashboard-widgets { grid-template-columns: 1fr; }
}

.octo-card { background:var(--octo-c-card, #ffffff); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:0.5rem; padding:1.5rem; box-shadow: 0 2px 8px rgba(17,24,39,0.04); }
.octo-card-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; }
.octo-card-header h3 { margin:0; font-size: 0.95rem; color:var(--octo-c-text, #111827); }
.octo-card-header .dashicons { color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
/* Ensure dashicons are white in orange headers */
.octo-modal-header-orange .dashicons,
.octo-modal-header-orange .octo-modal-close-white .dashicons,
.octo-flow-editor-header .dashicons {
    color: var(--octo-c-on-dark, #ffffff) !important;
}

.octo-list { display:flex; flex-direction:column; gap:0.5rem; }
.octo-list-item { display:grid; grid-template-columns: 1fr 220px minmax(320px, auto); align-items:center; gap:0.75rem; border-bottom:1px solid var(--octo-c-card-head, var(--octo-c-border, #f9fafb)); padding:0.5rem 0; }
.octo-list-item:last-child { border-bottom:none; }
.octo-item-title { display:flex; align-items:center; gap:0.5rem; font-weight:500; color:var(--octo-c-text, #111827); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.875rem; }
.octo-item-meta { color:var(--octo-c-text, #111827); font-size:0.875rem; font-weight:600; justify-self:start; text-align:left; display:flex; align-items:center; width:220px; min-width:220px; max-width:220px; white-space:nowrap; }

.octo-actions { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.75rem; }
@media (max-width: 900px) { .octo-actions { grid-template-columns: 1fr; } }
/* Bewusste Ausnahme: Das sind Navigationskacheln in einem zweispaltigen
   Raster, keine Schaltflaechen in einer Aktionsleiste - die volle Breite fuellt
   die Rasterzelle und ist hier gewollt. Die Masse folgen seit 2.24.2 dem
   System (vorher 1rem Schrift und 2.75rem Hoehe). */
.octo-actions .octo-btn { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:0.5rem 0.875rem; font-size:0.875rem; line-height:1.25; min-height:2.25rem; width:100%; box-sizing:border-box; text-decoration:none; border:1px solid transparent; border-radius:6px; }
.octo-actions .octo-btn .dashicons { margin-right:6px; }
/* Ensure quick actions are clickable and visually prominent */
.octo-actions .octo-btn { position: relative; z-index: 1; pointer-events: auto; }
/* Quick actions color overrides to ensure readability */
.octo-actions .octo-btn-primary { background:#006899 !important; color:var(--octo-c-on-dark, #ffffff) !important; border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)) !important; }
.octo-actions .octo-btn-secondary { background:var(--octo-c-page, #f3f4f6) !important; color:var(--octo-c-text, #111827) !important; border-color:var(--octo-c-border, #e5e7eb) !important; }
.octo-actions .octo-btn-primary:hover { filter:brightness(1.06); }
.octo-actions .octo-btn-secondary:hover { background:var(--octo-c-border, #e5e7eb) !important; }

.octo-btn { display:inline-flex; align-items:center; gap:6px; padding:0.6rem 0.9rem; font-size:0.95rem; line-height:1.2; border-radius:6px; border:1px solid transparent; text-decoration:none; }
.octo-btn-primary { background:#006899; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-btn-primary:hover { filter:brightness(1.05); }
.octo-btn-secondary { background:var(--octo-c-page, #f3f4f6); color:var(--octo-c-text, #111827); border-color:var(--octo-c-border, #e5e7eb); }
.octo-btn-secondary:hover { background:var(--octo-c-border, #e5e7eb); }
/* Global task (orange) button style for consistency */
.octo-btn-task { background:var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color:#e09000; }
.octo-btn-task:hover { filter:brightness(1.06); }
/* Confirm button (orange for dangerous actions) */
.octo-btn-confirm { background:var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color:#e09000; font-weight:600; }
.octo-btn-confirm:hover { filter:brightness(1.06); box-shadow:0 2px 8px rgba(224,144,0,0.3); }

/* Generic modal styles */
.octo-modal { position: fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important; z-index:99999; display:none; background:transparent !important; }
.octo-modal .octo-modal-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.octo-modal .octo-modal-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--octo-c-card, #ffffff); border-radius:0.75rem; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); width:calc(100% - 2rem); max-width:600px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; z-index:100000; }
.octo-modal .octo-modal-small { max-width:420px; }
.octo-modal .octo-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid var(--octo-c-border, #e5e7eb); background:var(--octo-c-card-head, #f9fafb); }
.octo-modal .octo-modal-header h3 { margin:0; font-size:1.25rem; color:var(--octo-c-text, #111827); }
.octo-modal .octo-modal-close { background:none; border:none; cursor:pointer; padding:0.25rem; color:var(--octo-c-muted, #6b7280); font-size:24px; }
.octo-modal .octo-modal-close:hover { color:var(--octo-c-text, #111827); }
.octo-modal .octo-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.octo-modal .octo-modal-body label { font-size:0.875rem; font-weight:500; }
.octo-modal .octo-modal-body .octo-field-hint { font-size: 0.8rem; color:var(--octo-c-muted, #6b7280); }
.octo-modal .octo-modal-body .octo-input,
.octo-modal .octo-modal-body input[type="text"],
.octo-modal .octo-modal-body input[type="email"],
.octo-modal .octo-modal-body input[type="password"],
.octo-modal .octo-modal-body select,
.octo-modal .octo-modal-body textarea { width:100%; box-sizing:border-box; }
.octo-modal .octo-modal-footer { display:flex; gap:0.75rem; justify-content:flex-end; padding:1.5rem; border-top:1px solid var(--octo-c-border, #e5e7eb); background:var(--octo-c-card-head, #f9fafb); }
.octo-modal .octo-modal-footer .octo-btn-primary { background:var(--octo-c-accent, #e09000); border-color:#e09000; color: var(--octo-c-accent-text, #1a1200); }
.octo-modal .octo-modal-footer .octo-btn-primary:hover { filter:brightness(1.1); }

/* Modal message styles */
.octo-modal-message-error { padding:12px 16px; background:color-mix(in srgb, #fee var(--octo-tint, 100%), var(--octo-c-card)); border:1px solid color-mix(in srgb, #fcc var(--octo-tint, 100%), var(--octo-c-border)); border-radius:6px; color:color-mix(in srgb, #c00 var(--octo-ink, 100%), var(--octo-c-text)); font-size:0.875rem; }
.octo-modal-message-success { padding:12px 16px; background:color-mix(in srgb, #efe var(--octo-tint, 100%), var(--octo-c-card)); border:1px solid color-mix(in srgb, #cfc var(--octo-tint, 100%), var(--octo-c-border)); border-radius:6px; color:color-mix(in srgb, #060 var(--octo-ink, 100%), var(--octo-c-text)); font-size:0.875rem; }

/* Specific modal IDs (legacy) */
#octo-task-modal { position: fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; }
#octo-task-modal .octo-modal-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
#octo-task-modal .octo-modal-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--octo-c-card, #ffffff); border-radius:0.75rem; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); width:calc(100% - 2rem); max-width:600px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
#octo-task-modal .octo-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid var(--octo-c-border, #e5e7eb); background:var(--octo-c-card-head, #f9fafb); }
#octo-task-modal .octo-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
#octo-task-modal .octo-modal-actions { display:flex; gap:0.75rem; margin-top:1rem; justify-content:flex-end; }

#octo-task-modal select option:checked,
#octo-task-modal select option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-task-modal select:focus option:checked,
#octo-task-modal select:focus option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-task-modal select option:active { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-task-modal select:not(:focus) option:checked,
#octo-task-modal select:not(:focus) option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-staff-task-modal select option:checked,
#octo-staff-task-modal select option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-staff-task-modal select:focus option:checked,
#octo-staff-task-modal select:focus option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-staff-task-modal select option:active { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
#octo-staff-task-modal select:not(:focus) option:checked,
#octo-staff-task-modal select:not(:focus) option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
.octo-dashboard #octo-task-assigned-to option:checked,
.octo-dashboard #octo-task-assigned-to option:selected,
.octo-dashboard #octo-task-assigned-to:focus option:checked,
.octo-dashboard #octo-task-assigned-to:focus option:selected,
.octo-dashboard #octo-task-assigned-to option:active,
.octo-dashboard #octo-task-assigned-group option:checked,
.octo-dashboard #octo-task-assigned-group option:selected,
.octo-dashboard #octo-task-assigned-group:focus option:checked,
.octo-dashboard #octo-task-assigned-group:focus option:selected,
.octo-dashboard #octo-task-assigned-group option:active,
.octo-dashboard #octo-staff-assigned-to option:checked,
.octo-dashboard #octo-staff-assigned-to option:selected,
.octo-dashboard #octo-staff-assigned-to:focus option:checked,
.octo-dashboard #octo-staff-assigned-to:focus option:selected,
.octo-dashboard #octo-staff-assigned-to option:active,
.octo-dashboard #octo-staff-assigned-group option:checked,
.octo-dashboard #octo-staff-assigned-group option:selected,
.octo-dashboard #octo-staff-assigned-group option:active { background-image:none !important; background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; -webkit-text-fill-color: var(--octo-c-accent-text, #1a1200) !important; }

.octo-dashboard select option:checked,
.octo-dashboard select option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
.octo-dashboard select:not(:focus) option:checked,
.octo-dashboard select:not(:focus) option:selected { background-color:var(--octo-c-accent, #e09000) !important; color: var(--octo-c-accent-text, #1a1200) !important; }
 

#octo-staff-task-modal { position: fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; }
#octo-staff-task-modal .octo-modal-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
#octo-staff-task-modal .octo-modal-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--octo-c-card, #ffffff); border-radius:0.75rem; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); width:calc(100% - 2rem); max-width:600px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
#octo-staff-task-modal .octo-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid var(--octo-c-border, #e5e7eb); background:var(--octo-c-card-head, #f9fafb); }
#octo-staff-task-modal .octo-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
#octo-staff-task-modal .octo-modal-actions { display:flex; gap:0.75rem; margin-top:1rem; justify-content:flex-end; }

.octo-modal-content .octo-form-group { margin-bottom: 16px; }
.octo-modal-content label { display:block; font-weight:600; color:var(--octo-c-text, #111827); margin-bottom:6px; }
.octo-modal-content input[type="text"],
.octo-modal-content input[type="email"],
.octo-modal-content input[type="password"],
.octo-modal-content input[type="search"],
.octo-modal-content select,
.octo-modal-content textarea { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--octo-c-border, #e5e7eb); border-radius:6px; font-size:14px; line-height:1.4; background:var(--octo-c-card, #ffffff); color:var(--octo-c-text, #111827); }
.octo-modal-content textarea { min-height: 110px !important; resize: vertical !important; }
.octo-modal-content input[type="text"]:focus,
.octo-modal-content input[type="email"]:focus,
.octo-modal-content input[type="password"]:focus,
.octo-modal-content input[type="search"]:focus,
.octo-modal-content textarea:focus,
.octo-modal-content select:focus { outline:none; border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,0.18); }
.octo-modal-content input[readonly] { background:var(--octo-c-page, #f3f4f6); color:var(--octo-c-text, #111827); }
.octo-modal-content small.octo-help-text { color:var(--octo-c-muted, #6b7280); display:block; margin-top:6px; }
.octo-modal-content small.octo-field-hint { color:var(--octo-c-muted, #6b7280); display:block; margin-top:6px; font-size: 0.8rem; }
.octo-modal-content .octo-inline-actions { display:flex; gap:8px; align-items:center; }
.octo-modal-content .octo-btn { border-radius:6px; }
.octo-modal-content .octo-btn-primary { background:#006899; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-modal-content .octo-btn-secondary { background:var(--octo-c-page, #f3f4f6); color:var(--octo-c-text, #111827); border-color:var(--octo-c-border, #e5e7eb); }
.octo-modal-content .octo-btn-task { background:var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color:#e09000; }
.octo-modal-content select[multiple] { min-height: 100px; }
.octo-modal-content select[multiple] option { padding:6px 8px; }
.octo-modal-content select[multiple] option:checked { background:#f59e0b; color: #1a1200; }
.octo-dashboard #octo-task-assigned-to,
.octo-dashboard #octo-task-assigned-group,
.octo-dashboard #octo-staff-assigned-to,
.octo-dashboard #octo-staff-assigned-group { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.octo-modal-content .octo-box { background:var(--octo-c-card-head, #f9fafb); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:10px; padding:12px; }

/* Emails box */
.octo-detail-box[data-box="emails"] .octo-box-actions{ display:flex; gap:8px; }
.octo-detail-box[data-box="emails"] .octo-box-actions .octo-btn{ flex:1; min-height:36px; padding:8px 14px; line-height:1.2; border-radius:6px; }
.octo-detail-box[data-box="emails"] #octo-contact-email-list .octo-list-row:hover{ background:var(--octo-c-card, #f8fafb); }
.octo-detail-box[data-box="emails"] .octo-empty{ font-size: 0.8rem; }
#octo-contact-email-list .octo-email-status{ margin-bottom:10px; padding:10px; border-radius:6px; font-size: 0.875rem; }
#octo-contact-email-list .octo-email-status.success{ background:color-mix(in srgb, #dcfce7 var(--octo-tint, 100%), var(--octo-c-card)); border:1px solid color-mix(in srgb, #86efac var(--octo-tint, 100%), var(--octo-c-border)); color:color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-contact-email-list .octo-email-status.error{ background:color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); border:1px solid color-mix(in srgb, #fca5a5 var(--octo-tint, 100%), var(--octo-c-border)); color:color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-detail-box[data-box="emails"] .octo-badge-sent{
	display:inline-block;
	margin-left:8px;
	border-radius:999px;
	font-size: 0.8rem;
	padding:2px 8px;
	background-color:color-mix(in srgb, #2271b1 25%, var(--octo-c-card, #ffffff));
	border:1px solid color-mix(in srgb, color-mix(in srgb, #2271b1 var(--octo-tint, 100%), var(--octo-c-border)) 45%, #ffffff);
	color:var(--octo-c-text, #111827);
}
#octo-doc-link-modal-email .octo-dir-item{ font-size: 0.875rem; }
#octo-doc-link-modal-email .octo-doc-row .octo-doc-name{ font-size: 0.875rem; }
#octo-doc-link-modal-email #octo-insert-doc-links-email{ background-image:none!important; background:var(--octo-c-accent, #e09000)!important; border-color:#e09000!important; color: var(--octo-c-accent-text, #1a1200)!important; }
#octo-doc-link-modal-email #octo-doclink-global-docs-email .octo-empty{ font-size: 0.875rem; font-weight:600; color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-contact-email-view .octo-modal-actions{ background:transparent; }
#octo-contact-email-view .octo-modal-actions .octo-btn-secondary{ background:var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color:#e09000; border-radius:6px; }
.octo-detail-box[data-box="emails"] .octo-box-actions .octo-btn-task{ background-image:none!important; background:var(--octo-c-accent, #e09000)!important; border-color:#e09000!important; color: var(--octo-c-accent-text, #1a1200)!important; }
.octo-detail-box[data-box="emails"] .octo-box-actions .octo-btn-primary{ background-image:none!important; background:#006899!important; border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text))!important; color:var(--octo-c-on-dark, #ffffff)!important; }

.octo-attached-docs { margin-top:8px; }
.octo-attached-docs .octo-doc-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--octo-c-border, #e5e7eb); }
.octo-attached-docs .octo-doc-name { font-size:0.875rem; }
.octo-attached-docs .octo-doc-size { font-size: 0.875rem; color:var(--octo-c-muted, #646970); }
.octo-attached-docs .octo-doc-actions { margin-left:auto; display:flex; gap:8px; }
.octo-attached-docs .octo-btn-view { background:color-mix(in srgb, #fff4e5 var(--octo-tint, 100%), var(--octo-c-card)); color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); border-color:color-mix(in srgb, #ffd8a8 var(--octo-tint, 100%), var(--octo-c-border)); border-radius:6px; padding:4px 8px; font-size:11px; line-height:1.2; height:auto; min-height:0; font-weight:600; }
.octo-attached-docs .octo-btn-view:hover { background:color-mix(in srgb, #ffe8cc var(--octo-tint, 100%), var(--octo-c-card)); }
.octo-attached-docs .octo-btn-download { background:color-mix(in srgb, #eaf3ff var(--octo-tint, 100%), var(--octo-c-card)); color:color-mix(in srgb, #2271b1 var(--octo-ink, 100%), var(--octo-c-text)); border-color:color-mix(in srgb, #cfe3ff var(--octo-tint, 100%), var(--octo-c-border)); border-radius:6px; padding:4px 8px; font-size:11px; line-height:1.2; height:auto; min-height:0; font-weight:600; }
.octo-attached-docs .octo-btn-download:hover { background:color-mix(in srgb, #d9eaff var(--octo-tint, 100%), var(--octo-c-card)); }

.octo-widget {
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.octo-widget h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0 0 1rem 0;
}

.octo-widget p {
	color: var(--octo-c-muted, #6b7280);
	margin: 0;
}

/* ============================================
   Contacts List
   ============================================ */
.octo-contacts-list,
.octo-appointments-list,
.octo-reports-overview {
	margin-top: 1.5rem;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
	.octo-sidebar {
		width: 220px;
	}
	
	.octo-main {
		margin-left: 220px;
		padding: 1.5rem;
	}
}

/* Mobile */
@media (max-width: 1200px) {
	.octo-sidebar {
		position: fixed;
		left: -260px;
		transition: left 0.3s;
		width: 260px;
	}
	
	.octo-sidebar.is-open {
		left: 0;
	}
	
	.octo-main {
		margin-left: 0;
		padding: 1rem;
	}
	
	.octo-content h1 {
		font-size: 1.5rem;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
    .octo-main {
        padding: 0.55rem!important;
    }
    
    .octo-widget {
        padding: 1rem;
    }
    
    .octo-contacts-list,
    .octo-appointments-list,
    .octo-reports-overview {
        padding: 1rem;
    }
}

/* ============================================
   Documents Page (Modern UI)
   ============================================ */
.octo-documents .octo-content h1,
.octo-documents .octo-page-title {
    font-size: 1.375rem; /* kleiner und sauberer */
    font-weight: 600;
    color: var(--octo-c-text, #111827);
    letter-spacing: -0.02em;
}

.octo-documents .octo-docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
}

.octo-documents .octo-docs-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--octo-c-border, #e5e7eb); /* dezente Trennlinie */
}

.octo-documents .octo-box {
    background: var(--octo-c-card, #ffffff);
    border: 1px solid var(--octo-c-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.octo-documents .octo-docs-grid .octo-box:nth-child(1) {
    background: linear-gradient(180deg, var(--octo-c-card, #ffffff) 0%, var(--octo-c-card-head, #f9fafb) 100%);
}

.octo-documents .octo-docs-grid .octo-box:nth-child(2) {
    background: linear-gradient(180deg, var(--octo-c-card, #ffffff) 0%, var(--octo-c-card-head, #f9fafb) 100%);
}

.octo-documents .octo-box h2 {
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    color: var(--octo-c-text, #111827);
    margin: 0 0 8px 0;
}

.octo-documents .octo-box .description {
    color: var(--octo-c-muted, #6b7280);
    margin: 0 0 16px 0;
}

/* Dropzone */
.octo-documents .octo-dropzone {
    border: 2px dashed var(--octo-c-border, #e5e7eb);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--octo-c-card-head, #f8fafc) 70%, transparent), color-mix(in srgb, var(--octo-c-card-head, #f8fafc) 40%, transparent));
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.octo-documents .octo-dropzone:hover {
    background: var(--octo-c-card-head, #f9fafb);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}

.octo-documents .octo-dropzone.drag {
    border-color: color-mix(in srgb, #0284c7 var(--octo-ink, 100%), var(--octo-c-text));
    background: color-mix(in srgb, #e0f2fe var(--octo-tint, 100%), var(--octo-c-card));
}

/* Directory items */
.octo-documents .octo-dir-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--octo-c-card-head, #f9fafb);
    border: 1px solid var(--octo-c-border, #e5e7eb);
    border-left: 4px solid #0284c7;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.octo-documents .octo-dir-item strong {
    color: var(--octo-c-text, #111827);
}

.octo-documents #octo-global-dirs code {
    background: color-mix(in srgb, #eef2ff var(--octo-tint, 100%), var(--octo-c-card));
    color: color-mix(in srgb, #3730a3 var(--octo-ink, 100%), var(--octo-c-text));
    padding: 2px 6px;
    border-radius: 6px;
}

/* Search */
.octo-documents .octo-search {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.octo-documents .octo-search input[type="text"] {
    flex: 1;
    border: 1px solid var(--octo-c-border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}

.octo-documents .octo-search input[type="text"]:focus {
    border-color: color-mix(in srgb, #0284c7 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-documents .octo-search .button {
    background: var(--octo-c-inverse, #111827);
    color: var(--octo-c-on-dark, #ffffff);
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
    transition: transform 0.06s ease, box-shadow 0.2s;
}

.octo-documents .octo-search .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(17,24,39,0.15);
}

/* Document items */
.octo-documents .octo-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--octo-c-card, #ffffff);
    border: 1px solid var(--octo-c-border, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s ease, transform 0.06s ease;
}

.octo-documents .octo-doc-item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.octo-documents .octo-doc-item .dashicons {
    background: color-mix(in srgb, #eff6ff var(--octo-tint, 100%), var(--octo-c-card));
    color: color-mix(in srgb, #0284c7 var(--octo-ink, 100%), var(--octo-c-text));
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.octo-documents .octo-doc-name {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    color: var(--octo-c-text, #111827);
}

.octo-documents .octo-doc-meta {
    color: var(--octo-c-muted, #6b7280);
    font-size: 0.8rem;
}

.octo-documents .octo-doc-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.octo-documents .octo-doc-actions .button,
.octo-documents .octo-doc-delete {
    background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
    color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
    border:1px solid color-mix(in srgb, #fecaca var(--octo-tint, 100%), var(--octo-c-border));
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.95rem; /* 15px */
    font-weight: 600;
}

.octo-documents .octo-doc-actions .button:hover,
.octo-documents .octo-doc-delete:hover {
    background: #fca5a5;
}

/* Responsive */
@media (max-width: 1024px) {
    .octo-documents .octo-docs-grid {
        grid-template-columns: 1fr;
    }
    .octo-documents .octo-docs-grid::before {
        display: none;
    }
}

/* ============================================
   Data View Configuration Panel
   ============================================ */

/* Panel Container */
.octo-slider-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	pointer-events: none;
	transition: opacity 0.3s ease;
	opacity: 0;
}

.octo-slider-panel.is-open {
	pointer-events: all;
	opacity: 1;
}

/* Overlay */
.octo-panel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.octo-slider-panel.is-open .octo-panel-overlay {
	opacity: 1;
}

/* Panel Content */
.octo-panel-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 80%;
	max-width: none;
	height: 100%;
	background: var(--octo-c-card, #ffffff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.octo-slider-panel.is-open .octo-panel-content {
	transform: translateX(0);
}

/* Panel Header */
.octo-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	background: var(--octo-c-card-head, #f9fafb);
	flex-shrink: 0;
}

.octo-panel-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.octo-panel-title .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-panel-close {
	background: transparent;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--octo-c-muted, #6b7280);
	transition: all 0.2s;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.octo-panel-close:hover {
	background: var(--octo-c-border, #e5e7eb);
	color: var(--octo-c-text, #111827);
}

.octo-panel-close .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* Panel Body */
.octo-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 2rem 2.5rem 2rem 2rem;
}

.octo-panel-description {
	color: var(--octo-c-muted, #6b7280);
	margin: 0 0 2rem 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Config Sections */
.octo-config-section {
	margin-bottom: 2.5rem;
}

.octo-config-section:last-child {
	margin-bottom: 0;
}

.octo-section-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
}

/* Accordion */
.octo-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Accordion Item */
.octo-accordion-item {
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	background: var(--octo-c-card, #ffffff);
	transition: all 0.2s;
	overflow: hidden;
}

.octo-accordion-item:hover {
	border-color: #e09000;
}

/* Accordion Header */
.octo-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	gap: 0.75rem;
}

.octo-accordion-checkbox {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	margin: 0;
}

.octo-accordion-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

.octo-accordion-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
}

.octo-accordion-title .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

.octo-accordion-toggle {
	background: transparent;
	border: none;
	padding: 0.375rem;
	cursor: pointer;
	color: var(--octo-c-muted, #6b7280);
	transition: all 0.2s;
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.octo-accordion-toggle:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: var(--octo-c-text, #111827);
}

.octo-accordion-toggle .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	transition: transform 0.2s;
}

.octo-accordion-item.is-open .octo-accordion-toggle .dashicons {
	transform: rotate(180deg);
}

/* Accordion Body */
.octo-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-accordion-item.is-open .octo-accordion-body {
	max-height: 500px;
}

/* Field List */
.octo-field-list {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.5rem;
}

.octo-field-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
}

.octo-field-item:hover {
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
	border-color: #e09000;
}

.octo-field-item input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

/* Simple Accordion Item (no fields) */
.octo-accordion-item-simple {
	padding: 1rem;
}

.octo-accordion-item-simple .octo-accordion-checkbox {
	width: 100%;
}

.octo-field-group-hint {
	font-size: 0.8rem;
	color: var(--octo-c-muted, #6b7280);
	font-weight: 400;
	margin-left: auto;
}

/* Integration Option */
.octo-integration-option {
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	background: var(--octo-c-card, #ffffff);
	padding: 1rem;
	margin-top: 1.5rem;
	cursor: pointer;
	transition: all 0.2s;
}

.octo-integration-option:hover {
	border-color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text));
	background: color-mix(in srgb, #eff6ff var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-field-group-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.octo-field-group-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-field-group-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
	flex: 1;
}

.octo-field-group-label .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

.octo-field-group-description {
	display: block;
	font-size: 0.8125rem;
	color: var(--octo-c-muted, #6b7280);
	margin-top: 0.5rem;
	margin-left: 1.75rem;
	line-height: 0;
}

/* Status Message */
.octo-config-status {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.95rem;
	font-weight: 500;
}

.octo-config-status.is-success {
	background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text));
	border: 1px solid #10b981;
}

.octo-config-status.is-error {
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
	border: 1px solid #ef4444;
}

.octo-status-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.octo-status-message {
	flex: 1;
}

/* Panel Footer */
.octo-panel-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding: 1.5rem 2rem;
	border-top: 1px solid var(--octo-c-border, #e5e7eb);
	background: var(--octo-c-card-head, #f9fafb);
	flex-shrink: 0;
}

.octo-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: 0.375rem;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.octo-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-btn-primary {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	border: 1px solid #e09000;
}

.octo-btn-primary:hover:not(:disabled) {
	background: #c27a00;
	border-color: #c27a00;
}

.octo-btn-primary:disabled,
.octo-btn-primary.is-loading {
	opacity: 0.6;
	cursor: not-allowed;
}

.octo-btn-secondary {
        background: var(--octo-c-page, #f3f4f6);
        color: var(--octo-c-text, #111827);
        border: 1px solid var(--octo-c-border, #e5e7eb);
}

.octo-btn-secondary:hover {
        background: var(--octo-c-border, #e5e7eb);
        border-color: var(--octo-c-muted, #6b7280);
}

/* Prevent body scroll when panel is open */
body.octo-panel-open {
        overflow: hidden;
}

/* Emails page specific button styles */
#octo-email-list .octo-btn-primary { background:#006899; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-email-list .octo-btn-primary:hover { filter:brightness(1.05); }
#gh-email-pagination .octo-btn-secondary { background:#bbb !important; color: #1a1200; border-color:var(--octo-c-border, #e5e7eb); }
#gh-email-pagination .octo-btn-secondary:hover { background:var(--octo-c-muted, #6b7280) !important; }
#gh-email-prev, #gh-email-next { background:var(--octo-c-border, #e5e7eb); color:var(--octo-c-text, #111827); border:1px solid #999999; }
#gh-email-prev:hover, #gh-email-next:hover { background:#666666; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #ffffff var(--octo-tint, 100%), var(--octo-c-border)); }

.octo-subheading {
        font-size: 1.6rem;
        font-weight: 600;
        margin: 8px 0 10px 0;
        color: var(--octo-c-text, #111827);
}
.octo-news-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; align-items:start; }
.octo-news-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:28px; align-items:start; }
.octo-card { background:var(--octo-c-card, #ffffff); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:8px; padding:1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.octo-form-col { display:flex; flex-direction:column; gap:12px; }
.octo-form-col .octo-form-field, .octo-form-col .octo-input, .octo-form-col .octo-multi { width:100%; }
.octo-btn-block { width:100%; }
.octo-switch { position:relative; display:inline-block; width:46px; height:26px; }
.octo-switch input { opacity:0; width:0; height:0; }
.octo-switch-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--octo-c-border, #e5e7eb); transition:.2s; border-radius:9999px; }
.octo-switch-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; top:3px; background:var(--octo-c-card, #ffffff); transition:.2s; border-radius:9999px; }
.octo-switch input:checked + .octo-switch-slider { background:#006899; }
.octo-switch input:checked + .octo-switch-slider:before { transform: translateX(20px); }
@media (max-width: 900px) { .octo-news-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .octo-news-grid-3 { grid-template-columns: 1fr; } }
.octo-form-field { display:flex; flex-direction:column; gap:6px; }
.octo-tag-list { border:1px solid var(--octo-c-border, #e5e7eb); border-radius:6px; background:var(--octo-c-card, #ffffff); padding:8px; max-height:220px; overflow:auto; }
.octo-tag-list label { display:flex; align-items:center; gap:8px; padding:4px 2px; color:var(--octo-c-text, #111827); }
.octo-tag-selector { position:relative; display:flex; flex-direction:column; gap:8px; }
.octo-tag-chips { display:flex; flex-wrap:wrap; gap:6px; min-height:36px; padding:6px; border:1px solid var(--octo-c-border, #e5e7eb); border-radius:6px; background:var(--octo-c-card, #ffffff); }
.octo-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:9999px; background:var(--octo-c-page, #f3f4f6); border:1px solid var(--octo-c-border, #e5e7eb); color:var(--octo-c-text, #111827); font-size:0.8125rem; }
.octo-chip .octo-chip-remove { background:transparent; border:none; color:var(--octo-c-muted, #6b7280); cursor:pointer; }
.octo-tag-suggest { position:absolute; top:100%; left:0; right:0; background:var(--octo-c-card, #ffffff); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:6px; max-height:220px; overflow:auto; z-index:20; list-style:none; margin:0; padding:6px; }
.octo-tag-suggest li { padding:6px 8px; border-radius:4px; cursor:pointer; color:var(--octo-c-text, #111827); }
.octo-tag-suggest li:hover { background:var(--octo-c-page, #f3f4f6); }
.octo-segment-bar { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
/* Kein width:100%: .octo-segment-bar richtet mit align-items:flex-start bereits
   links aus - beides zusammen war ein Widerspruch. */
.octo-segment-bar .octo-input { width:100%; max-width:100%; }

#gh-segment-delete { background:#006899; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
#gh-segment-delete:hover { filter:brightness(1.06); }

#octo-news-schedule { background:#006899; color:var(--octo-c-on-dark, #ffffff); border-color:color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-news-schedule:hover { filter:brightness(1.06); }
@media (max-width: 900px) { .octo-news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .octo-news-grid { grid-template-columns: 1fr; } .octo-segment-bar { flex-direction:column; align-items:stretch; gap:8px; } }

/* Responsive */
@media (max-width: 640px) {
	.octo-panel-content {
		max-width: 100%;
	}
	
	.octo-panel-body {
		padding: 1.5rem;
	}
	
	.octo-panel-header,
	.octo-panel-footer {
		padding: 1rem 1.5rem;
	}
}

/* ============================================
   Contacts Table
   ============================================ */
.octo-contacts-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-section-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
	flex-shrink: 0;
}

.octo-input {
	padding: 0.625rem 1rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	width: 100%;
}

@media (max-width: 1200px) {
	.octo-input {
		font-size: 0.875rem;
		padding: 0.25rem 0.5rem;
		min-height: auto;
		height: 32px;
	}
}

.octo-input:focus {
	outline: none;
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.octo-table-wrapper {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 1.5rem;
}

.octo-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.octo-table thead {
	background: var(--octo-c-card-head, #f9fafb);
	border-bottom: 2px solid var(--octo-c-border, #e5e7eb);
}

.octo-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	white-space: nowrap;
}

/* Sortable column headers */
.octo-table th.octo-sortable {
	cursor: pointer;
	user-select: none;
	transition: background 0.2s, color 0.2s;
}

.octo-table th.octo-sortable:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-table th.octo-sorted {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 700;
}

.octo-table tbody tr {
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	transition: background 0.2s;
}

.octo-table tbody tr:hover {
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-table td {
    padding: 0.75rem 1rem;
    color: var(--octo-c-text, #111827);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Dropdown cells need more space */
.octo-table td:has(select) {
	min-width: 180px;
	max-width: 250px;
}

.octo-table .octo-actions {
    white-space: nowrap;
    text-align: left;
    width: 80px;
}

.octo-actions-col {
	width: 90px;
	min-width: 90px;
	position: sticky;
	left: 0;
	background: var(--octo-c-card-head, #f9fafb);
	z-index: 10;
	box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

.octo-table tbody tr td.octo-actions {
    position: sticky;
    left: 0;
    background: var(--octo-c-card, #ffffff);
    z-index: 5;
    border-right: 2px solid var(--octo-c-border, #e5e7eb);
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    display: table-cell !important;
    vertical-align: middle;
}

.octo-table tbody tr:hover td.octo-actions {
	background: var(--octo-c-card-head, #f9fafb);
}

/* Color column - narrow with minimal padding */
.octo-color-col {
	width: 5px;
	min-width: 5px;
	max-width: 5px;
	padding: 0 !important;
	margin: 0 !important;
}

.octo-table tbody tr td.octo-color-marker {
	padding: 0 !important;
	margin: 0 !important;
	width: 5px;
	min-width: 5px;
	max-width: 5px;
}

/* Icon buttons - small and subtle */
.octo-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	background: var(--octo-c-card-head, #f9fafb);
	color: var(--octo-c-text, #111827);
	cursor: pointer;
	transition: all 0.15s;
	margin-right: 0.375rem;
}

.octo-btn-icon:hover {
	background: var(--octo-c-border, #e5e7eb);
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-btn-icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-btn-edit {
	color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text));
	background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card));
	border-color:color-mix(in srgb, #6ee7b7 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-edit:hover {
	background:color-mix(in srgb, #a7f3d0 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text));
	border-color:color-mix(in srgb, #34d399 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-delete {
	color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text));
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
	border-color:color-mix(in srgb, #fca5a5 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-delete:hover {
	background: color-mix(in srgb, #fecaca var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
	border-color: #f87171;
}

/* Regular buttons block removed to avoid overriding variant colors */

.octo-btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.octo-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-pagination:empty {
	display: none;
}

.octo-pagination-info {
	color: var(--octo-c-muted, #6b7280);
	font-size: 0.875rem;
}

.octo-pagination-buttons {
	display: flex;
	gap: 0.5rem;
}

.octo-text-center {
	text-align: center !important;
}

.octo-error {
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 500;
}

/* Inline Status Dropdown in Table */
.octo-status-cell {
	padding: 0.5rem 1rem !important;
}

.octo-table-status-dropdown {
	width: 100%;
	min-width: 150px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-family: inherit;
	background: var(--octo-c-card, #ffffff);
	cursor: pointer;
	transition: all 0.2s;
}

.octo-table-status-dropdown:hover {
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-table-status-dropdown:focus {
	outline: none;
	border-color: #e09000;
	box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.1);
}

.octo-table-status-dropdown:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--octo-c-page, #f3f4f6);
}

/* ============================================
   Toolbar Enhancements
   ============================================ */
.octo-contacts-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-toolbar-left {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-section-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
}

.octo-toolbar-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.octo-search-input {
	min-width: 250px;
}

.octo-btn-secondary {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	border: 1px solid #e09000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	text-align: center;
	height: auto;
	line-height: 1.5;
}

.octo-btn-secondary:hover {
    background: var(--octo-c-border, #e5e7eb);
    border-color: var(--octo-c-border, #e5e7eb);
    color: var(--octo-c-text, #111827);
}

.octo-active-filters {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ============================================
   Form Styles for View Editor
   ============================================ */
.octo-form-group {
	margin-bottom: 1.5rem;
}

.octo-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin-bottom: 0.5rem;
}

.octo-label-hint {
	font-weight: 400;
	color: var(--octo-c-muted, #6b7280);
	margin-left: 0.5rem;
}

.octo-input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
	transition: all 0.2s;
}

.octo-input:focus {
	outline: none;
	border-color: #e09000;
	box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.1);
}

.octo-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	cursor: pointer;
}

.octo-checkbox input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Column Selector with Drag & Drop
   ============================================ */
.octo-column-selector {
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	max-height: 400px;
	overflow-y: auto;
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-column-item {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	background: var(--octo-c-card, #ffffff);
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	cursor: move;
	transition: all 0.2s;
}

.octo-column-item:last-child {
	border-bottom: none;
}

.octo-column-item:hover {
	background: var(--octo-c-page, #f3f4f6);
}

.octo-column-item.dragging {
	opacity: 0.5;
}

.octo-column-item[data-fixed="true"] {
	background: var(--octo-c-card-head, #f9fafb);
	cursor: default;
}

.octo-drag-handle {
	color: var(--octo-c-muted, #6b7280);
	margin-right: 0.75rem;
	cursor: move;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-column-item[data-fixed="true"] .octo-drag-handle {
	opacity: 0.3;
	cursor: default;
}

.octo-column-label {
	flex: 1;
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
}

.octo-column-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Filters Container
   ============================================ */
.octo-filters-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.octo-filters-container .octo-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.75rem;
	background: var(--octo-c-card-head, #f9fafb);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	position: relative;
	transition: all 0.2s;
}

.octo-filters-container .octo-filter-row:hover {
	background: var(--octo-c-page, #f3f4f6);
	border-color: var(--octo-c-border, #e5e7eb);
}

/* Field selector - minimum width */
.octo-filter-field {
	min-width: 150px;
	flex: 1 1 auto;
	max-width: 200px;
}

/* Operator selector */
.octo-filter-operator {
	min-width: 120px;
	flex: 0 0 auto;
}

/* Value inputs */
.octo-filter-value,
.octo-filter-value2 {
	min-width: 150px;
	flex: 1 1 auto;
}

/* Value2 for ranges */
.octo-filter-value2 {
	max-width: 150px;
}

/* Multi-select (tags) */
.octo-filter-value[multiple] {
	min-height: 100px;
	max-height: 150px;
	flex: 1 1 100%;
}

/* Remove button */
.octo-filter-remove {
	background: transparent;
	border: none;
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
	flex: 0 0 auto;
}

.octo-filter-remove:hover {
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-filter-remove .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Relation toggle button (AND/OR) */
.octo-filter-relation {
	position: absolute;
	bottom: -0.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--octo-c-card, #ffffff);
	border: 1px solid #e09000;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 1rem;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	z-index: 10;
}

.octo-filter-relation:hover {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	box-shadow: 0 4px 6px -1px rgba(224, 144, 0, 0.3);
}

/* Responsive adjustments for filters */
@media (max-width: 1200px) {
	.octo-filter-row {
		flex-direction: column;
	}
	
	.octo-filter-field,
	.octo-filter-operator,
	.octo-filter-value,
	.octo-filter-value2 {
		max-width: 100%;
		width: 100%;
	}
}

/* ============================================
   Button Variants
   ============================================ */
.octo-btn-danger {
	background: #dc2626;
	color:var(--octo-c-on-dark, #ffffff);
}

.octo-btn-danger:hover {
	background: #b91c1c;
}

.octo-btn-primary {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.octo-btn-primary:hover {
	background: #c27a00;
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
	.octo-toolbar-right {
		width: 100%;
	}
	
	.octo-search-input {
		min-width: 0;
		flex: 1;
	}
}

/* ============================================
   Toast Notifications
   ============================================ */
#octo-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
}

.octo-toast {
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 300px;
	max-width: 450px;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.3s ease;
	pointer-events: auto;
	border-left: 4px solid var(--octo-c-muted, #6b7280);
}

.octo-toast-visible {
	opacity: 1;
	transform: translateX(0);
}

.octo-toast .dashicons {
	flex-shrink: 0;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.octo-toast-message {
	flex: 1;
	font-size: 0.95rem;
	color: var(--octo-c-text, #111827);
	line-height: 1.5;
}

.octo-toast-close {
	background: transparent;
	border: none;
	color: var(--octo-c-muted, #6b7280);
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 0.25rem;
	transition: all 0.2s;
	flex-shrink: 0;
}

.octo-toast-close:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: var(--octo-c-text, #111827);
}

.octo-toast-close .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Toast types */
.octo-toast-success {
	border-left-color: #10b981;
}

.octo-toast-success > .dashicons {
	color:color-mix(in srgb, #0c875e var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-toast-error {
	border-left-color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-toast-error > .dashicons {
	color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-toast-warning {
	border-left-color: #f59e0b;
}

.octo-toast-warning > .dashicons {
	color:color-mix(in srgb, #a56a07 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-toast-info {
	border-left-color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-toast-info > .dashicons {
	color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Responsive Toast */
@media (max-width: 480px) {
	#octo-toast-container {
		top: 10px;
		right: 10px;
		left: 10px;
	}
	
	.octo-toast {
		min-width: 0;
		max-width: 100%;
	}
}
.octo-hovercard-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
  border:1px solid color-mix(in srgb, #eef2f7 var(--octo-tint, 100%), var(--octo-c-border)); /* very light border */
  border-radius: 6px;
  background: var(--octo-c-card-head, #f9fafb);
  padding: 6px 8px;
  margin-bottom: 0.5rem;
}
.octo-hovercard-label {
  color: var(--octo-c-muted, #4b5563);
}
.octo-hovercard-value a {
  color: inherit;
  text-decoration: none;
}
.octo-hovercard-value a:hover {
  text-decoration: underline;
}
.octo-multi { position:relative; }
.octo-multi { width:100%; max-width:100%; }
.octo-multi .octo-multi-trigger { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    border: 1px solid var(--octo-c-border, #e5e7eb); 
    border-radius: 0.375rem; 
    background: var(--octo-c-card-head, #f9fafb); 
    color: var(--octo-c-text, #111827); 
    padding: 0.625rem 0.75rem; 
    cursor: pointer; 
    font-size: 0.875rem; 
    font-weight: 400; 
    line-height: 1.25; 
    width: 100%; 
    box-sizing: border-box; 
    max-width: 100%; 
    min-height: 2.5rem; 
}
.octo-multi .octo-multi-trigger:hover { border-color:var(--octo-c-border, #e5e7eb); }
.octo-multi .octo-multi-trigger:focus, .octo-multi.is-open .octo-multi-trigger { outline:none; border-color:#e09000; box-shadow:0 0 0 3px rgba(224,144,0,0.1); }
.octo-multi .octo-multi-panel { position:absolute; top:100%; left:0; width:100%; max-width:100%; box-sizing:border-box; background:var(--octo-c-card-head, #f9fafb); color:var(--octo-c-text, #111827); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:0.375rem; box-shadow:0 10px 20px rgba(0,0,0,0.08); margin-top:6px; z-index:30; display:none; font-size:0.875rem; font-weight:400; }
.octo-multi .octo-multi-search { padding:8px; border-bottom:1px solid var(--octo-c-border, #e5e7eb); }
.octo-multi .octo-multi-search input { width:100%; }
.octo-multi .octo-multi-list { max-height:180px; overflow:auto; padding:6px; }
.octo-multi .octo-multi-label { font-weight: 400; color:var(--octo-c-text, #111827); }
.octo-multi .octo-multi-item { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:4px; cursor:pointer; color:var(--octo-c-text, #111827); font-size: 0.875rem; line-height:1.2; }
.octo-multi .octo-multi-item:hover { background:var(--octo-c-page, #f3f4f6); }
.octo-multi .octo-multi-item.selected { background:#006899; color:var(--octo-c-on-dark, #ffffff); }
.octo-multi .octo-selected { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.octo-multi .octo-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:9999px; background:var(--octo-c-page, #f3f4f6); border:1px solid var(--octo-c-border, #e5e7eb); color:var(--octo-c-text, #111827); font-size:0.8125rem; }
.octo-multi .octo-chip button { background:transparent; border:none; color:var(--octo-c-muted, #6b7280); cursor:pointer; }
.octo-card--mt { margin-top:16px; }
#octo-news-status { margin-bottom:10px; }
#octo-news-progress { display:none; margin-bottom:10px; }
.octo-select { position:relative; width:100%; max-width:100%; }
.octo-select .octo-select-trigger { display:flex; justify-content:flex-start; align-items:center; border:1px solid var(--octo-c-border, #e5e7eb); border-radius:0.375rem; background:var(--octo-c-card-head, #f9fafb); color:var(--octo-c-text, #111827); padding:0.625rem 0.75rem; cursor:pointer; font-size:0.875rem; font-weight:400; line-height:1.25; width:100%; max-width:100%; box-sizing:border-box; min-height:2.5rem; }
.octo-select .octo-select-trigger:hover { border-color:var(--octo-c-border, #e5e7eb); }
.octo-select .octo-select-trigger:focus, .octo-select.is-open .octo-select-trigger { outline:none; border-color:#e09000; box-shadow:0 0 0 3px rgba(224,144,0,0.1); }
.octo-select .octo-select-panel { position:absolute; top:100%; left:0; width:100%; max-width:100%; box-sizing:border-box; background:var(--octo-c-card-head, #f9fafb); color:var(--octo-c-text, #111827); border:1px solid var(--octo-c-border, #e5e7eb); border-radius:0.375rem; box-shadow:0 10px 20px rgba(0,0,0,0.08); margin-top:6px; z-index:30; display:none; font-size:0.875rem; font-weight:400; }
.octo-select .octo-select-list { max-height:180px; overflow:auto; padding:6px; }
.octo-select .octo-select-item { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:4px; cursor:pointer; color:var(--octo-c-text, #111827); font-size: 0.875rem; line-height:1.2; }
.octo-select .octo-select-item:hover { background:var(--octo-c-page, #f3f4f6); }
.octo-select .octo-select-item.selected { background:#006899; color:var(--octo-c-on-dark, #ffffff); }
.octo-status-dot { width:10px; height:10px; border-radius:9999px; display:inline-block; }
.octo-status-dot.is-green { background:#16a34a; }
.octo-status-dot.is-yellow { background:#f59e0b; }
.octo-status-dot.is-red { background:#dc2626; }
.octo-item-actions { display:flex; flex-wrap:wrap; gap:0.4rem; justify-self:end; }
.octo-item-actions .gh-action { width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:none; cursor:pointer; }
.octo-item-actions .gh-action .dashicons { margin:0; }
.gh-act { background:#16a34a; color: #1a1200; }
.gh-deact { background:#f59e0b; color: #1a1200; }
.gh-edit { background:#006899; color:var(--octo-c-on-dark, #ffffff); }
.gh-preview { background:var(--octo-c-muted, #6b7280); color: var(--octo-c-on-dark, #ffffff); }
.gh-recip { background:#7c3aed; color:var(--octo-c-on-dark, #ffffff); }
.gh-delete { background:#dc2626; color:var(--octo-c-on-dark, #ffffff); }
.dcs-required-star{ color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); margin-left:4px; }
.dcs-required-note{ font-size: 0.8rem; color:var(--octo-c-muted, #6b7280); margin-top:6px; }

/* ============================================
   View Panel - Slide Panel
   ============================================ */
.octo-slide-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	pointer-events: none;
}

.octo-slide-panel.open {
	pointer-events: auto;
}

.octo-slide-panel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s;
}

.octo-slide-panel.open .octo-slide-panel-overlay {
	opacity: 1;
}

.octo-slide-panel-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 80%;
	max-width: none;
	height: 100%;
	background: var(--octo-c-card, #ffffff);
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-slide-panel.open .octo-slide-panel-content {
	transform: translateX(0);
}

.octo-slide-panel-header {
	padding: 1.5rem;
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.octo-slide-panel-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
}

.octo-slide-panel-close {
	background: transparent;
	border: none;
	color: var(--octo-c-muted, #6b7280);
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.octo-slide-panel-close:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: var(--octo-c-text, #111827);
}

.octo-slide-panel-close .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.octo-slide-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.octo-slide-panel-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--octo-c-border, #e5e7eb);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-footer-left {
	display: flex;
	gap: 0.75rem;
}

.octo-footer-right {
	display: flex;
	gap: 0.75rem;
}

/* ============================================
   Form Styles for View Editor
   ============================================ */
.octo-form-group {
	margin-bottom: 1.5rem;
}

.octo-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin-bottom: 0.5rem;
}

.octo-label-hint {
	font-weight: 400;
	color: var(--octo-c-muted, #6b7280);
	margin-left: 0.5rem;
}

.octo-input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
	transition: all 0.2s;
}

.octo-input:focus {
	outline: none;
	border-color: #e09000;
	box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.1);
}

.octo-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	cursor: pointer;
}

.octo-checkbox input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Column Selector with Drag & Drop
   ============================================ */
.octo-column-selector {
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	max-height: 400px;
	overflow-y: auto;
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-column-item {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	background: var(--octo-c-card, #ffffff);
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	cursor: move;
	transition: all 0.2s;
}

.octo-column-item:last-child {
	border-bottom: none;
}

.octo-column-item:hover {
	background: var(--octo-c-page, #f3f4f6);
}

.octo-column-item.dragging {
	opacity: 0.5;
}

.octo-column-item[data-fixed="true"] {
	background: var(--octo-c-card-head, #f9fafb);
	cursor: default;
}

.octo-drag-handle {
	color: var(--octo-c-muted, #6b7280);
	margin-right: 0.75rem;
	cursor: move;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-column-item[data-fixed="true"] .octo-drag-handle {
	opacity: 0.3;
	cursor: default;
}

.octo-column-label {
	flex: 1;
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
}

.octo-column-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Filters Container
   ============================================ */
.octo-filters-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.octo-filters-container .octo-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.75rem;
	background: var(--octo-c-card-head, #f9fafb);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	position: relative;
	transition: all 0.2s;
}

.octo-filters-container .octo-filter-row:hover {
	background: var(--octo-c-page, #f3f4f6);
	border-color: var(--octo-c-border, #e5e7eb);
}

.octo-filter-field {
	min-width: 150px;
	flex: 1 1 auto;
	max-width: 200px;
}

.octo-filter-operator {
	min-width: 120px;
	flex: 0 0 auto;
}

.octo-filter-value,
.octo-filter-value2 {
	min-width: 150px;
	flex: 1 1 auto;
}

.octo-filter-value2 {
	max-width: 150px;
}

.octo-filter-value[multiple] {
	min-height: 100px;
	max-height: 150px;
	flex: 1 1 100%;
}

.octo-filter-remove {
	background: transparent;
	border: none;
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
	flex: 0 0 auto;
}

.octo-filter-remove:hover {
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-filter-remove .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.octo-filter-relation {
	position: absolute;
	bottom: -0.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--octo-c-card, #ffffff);
	border: 1px solid #e09000;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 1rem;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	z-index: 10;
}

.octo-filter-relation:hover {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	box-shadow: 0 4px 6px -1px rgba(224, 144, 0, 0.3);
}

/* ============================================
   Button Variants
   ============================================ */
.octo-btn-danger {
	background: #dc2626;
	color:var(--octo-c-on-dark, #ffffff);
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.octo-btn-danger:hover {
	background: #b91c1c;
}

.octo-btn-link {
	background: none;
	border: none;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	padding: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.octo-btn-link:hover {
	text-decoration: underline;
}

/* ============================================
   Mobile Header (Hidden on Desktop)
   ============================================ */
.octo-mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--octo-c-inverse, #111827);
	color: var(--octo-c-on-dark, #ffffff);
	z-index: 1100;
	padding: 0 1rem;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.octo-mobile-menu-toggle {
	background: transparent;
	border: none;
	color: var(--octo-c-on-dark, #ffffff);
	font-size: 24px;
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.octo-mobile-menu-toggle .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.octo-mobile-logo {
	flex: 1;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 600;
}

.octo-mobile-logo img {
	max-height: 40px;
	width: auto;
}

.octo-mobile-logout {
	color: var(--octo-c-on-dark, #ffffff);
	text-decoration: none;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.octo-mobile-logout .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.octo-mobile-nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1050;
}

.octo-mobile-nav-overlay.active {
	display: block;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
	/* Show mobile header */
	.octo-mobile-header {
		display: flex;
	}
	
	/* Hide sidebar by default, show with menu toggle */
	.octo-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1100;
		overflow-y: auto;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
	}
	
	.octo-sidebar.mobile-open {
		transform: translateX(0);
	}
	
	/* Adjust main content for mobile header */
	.octo-main {
		margin-left: 0;
		margin-top: 20px;
		/* padding: 1rem; */
		width: 100%;
		max-width: 100vw;
		overflow-x: clip;
		box-sizing: border-box;
		background: var(--octo-c-page, #f3f4f6)
	}

	.octo-content {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
		box-sizing: border-box;
		margin: 40px 0;
		padding: 0;
	}
	
	.octo-content h1 {
		font-size: 1.25rem;
		margin: 0 0 0.75rem 0;
	}
	
	/* Simplify navigation on mobile - show only key items */
	.octo-nav-menu > .octo-nav-item:not([data-mobile-visible]) {
		display: none;
	}
	
	/* Hide view management buttons on mobile */
	.octo-sidebar-create-view {
		display: none !important;
	}
	
	/* Panels */
	.octo-slide-panel-content {
		width: 100%;
		max-width: 100%;
	}
	
	.octo-filter-row {
		flex-direction: column;
	}
	
	.octo-filter-field,
	.octo-filter-operator,
	.octo-filter-value,
	.octo-filter-value2 {
		max-width: 100%;
		width: 100%;
	}
	
	/* Toolbar */
	.octo-contacts-toolbar {
		flex-direction: row;
		gap: 0.25rem;
		padding: 0.25rem;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		border-bottom: none;
		background: transparent;
	}
	
	.octo-toolbar-left {
		display: none !important; /* Hide title on mobile */
	}
	
	.octo-toolbar-right {
		display: flex;
		flex-direction: row;
		gap: 0.25rem;
		width: 100%;
	}
	
	.octo-toolbar-right .octo-input {
		flex: 0 0 68%;
		min-width: 0;
		max-width: 68%;
		height: 32px;
		padding: 0.25rem 0.5rem;
	}
	
	.octo-toolbar-right .octo-input::placeholder {
		font-size: 0.6875rem;
	}
	
	.octo-toolbar-right .octo-btn {
		flex: 0 0 30%;
		max-width: 30%;
		white-space: nowrap;
		padding: 0.25rem 0.5rem;
		font-size: 0.6875rem;
		justify-content: center;
		height: 32px;
		border-radius: 0.375rem !important;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.octo-toolbar-right .octo-btn .dashicons {
		font-size: 11px;
		width: 11px;
		height: 11px;
	}
	
	/* Hide "Ändern" button on mobile */
	#octo-customize-view {
		display: none !important;
	}
	
	/* Hide Kanban toggle button on mobile */
	#octo-toggle-display-mode {
		display: none !important;
	}
	
	/* Table */
	.octo-contacts-list {
		margin: 0;
		padding: 0;
	}
	
	.octo-table-wrapper {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		margin: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	
	.octo-table {
		font-size: 0.6875rem; /* 11px */
	}
	
	.octo-table th,
	.octo-table td {
		padding: 0.3rem 0.35rem;
		font-size: 0.6875rem; /* 11px */
	}
	
	.octo-section-title {
		font-size: 0.875rem;
		margin: 0;
	}
}

/* Newsletter Design Adjustments */
.octo-btn-half {
    flex: 1;
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0.5rem; /* Slightly thinner/schmaler than standard */
    min-height: 36px; /* Ensure consistent height */
}

/* Force octo-input to match .octo-select-trigger design exactly */
.octo-input:not(textarea):not([multiple]), 
#gh-date,
#gh-time,
#gh-news-title,
#gh-segment-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 2.5rem !important; /* 40px */
    height: 2.5rem !important;
    padding: 0.625rem 0.75rem !important;
    border: 1px solid var(--octo-c-border, #e5e7eb) !important;
    border-radius: 0.375rem !important;
    background: var(--octo-c-card-head, #f9fafb) !important;
    color: var(--octo-c-text, #111827) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    margin: 0 !important; /* Reset any margins */
}

/* Textareas need different treatment */
textarea.octo-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Ohne Angabe nimmt ein textarea die Monospace-Schrift des Browsers und
       steht damit als einziges Feld eines Formulars aus der Reihe. */
    font-family: inherit !important;
    padding: 0.625rem 0.75rem !important;
    border: 1px solid var(--octo-c-border, #e5e7eb) !important;
    border-radius: 0.375rem !important;
    background: var(--octo-c-card-head, #f9fafb) !important;
    color: var(--octo-c-text, #111827) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    resize: vertical !important;
}

/* Newsletter Save Button - Orange */
#octo-news-save {
    background-color: var(--octo-c-accent, #e09000) !important;
    border-color: #e09000 !important;
    color: var(--octo-c-accent-text, #1a1200) !important;
}
#octo-news-save:hover {
    background-color: #c27a00 !important;
    border-color: #c27a00 !important;
}

/* HIDE native select fields to prevent double inputs */
#gh-email-select, #gh-segment-select {
    display: none !important;
}
 

/* ─── Schnellauswahl-Leiste ─────────────────────────────────────────── */
.octo-quick-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 14px;
    align-items: center;
}

.octo-qf-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, box-shadow 0.15s;
    line-height: 1.5;
    background: transparent;
}

.octo-qf-chip:hover {
    opacity: 0.85;
}

.octo-qf-chip.active {
    box-shadow: 0 0 0 2px currentColor;
    font-weight: 700;
}

/* Dialog: Schnellauswahl-Optionen */
.octo-quick-filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.octo-quick-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
    margin-bottom: 4px;
}

.octo-quick-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 3px 0;
    border-radius: 4px;
}

.octo-quick-filter-item.dragging {
    opacity: 0.4;
}

.octo-qf-drag-handle {
    cursor: grab;
    color: var(--octo-c-muted, #6b7280);
    flex-shrink: 0;
}

.octo-qf-drag-handle:active {
    cursor: grabbing;
}

.octo-quick-filter-item input[type="checkbox"],
.octo-quick-filter-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.octo-quick-filter-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ============================================
   Mobile-only Views (2.3.6+)
   Views mit is_mobile_only=true bekommen die Klasse .octo-nav-view-mobile-only.
   Auf Desktop/Tablet (>=769px) werden sie in der Kontakte-Sidebar ausgeblendet.
   Auf Mobil (<768px) bleiben sie sichtbar.

   Verwaltung findet ab 2.3.10 nicht mehr in einer eigenen Sidebar-Sektion statt,
   sondern ueber das dritte Icon in der Sidebar-Fusszeile (Modal-Dialog).

   Hinweis: URL-Sharing (?view=…) laedt die Ansicht weiterhin, unabhaengig von
   der Sidebar-Sichtbarkeit.
   ============================================ */
@media (min-width: 769px) {
    .octo-nav-submenu li.octo-nav-view-mobile-only,
    .octo-nav-submenu-nested li.octo-nav-view-mobile-only {
        display: none !important;
    }
}

/* Strikter Mobile-Sichtbarkeitsfilter (2.3.13):
   Wenn der User Mobile-Only-Views hat, bekommt <ul.octo-nav-submenu>
   die Klasse .octo-nav-has-mobile-views (server-side gesetzt in
   class-octo-navigation.php). Auf Mobil (<768px) versteckt der
   folgende Selektor alle direkten Kinder-<li>, die KEINE
   Mobile-Only-View sind – dazu gehoeren:
   - "Alle Kontakte"-Fallback-Eintrag
   - Pinned Normal-Views
   - "Weitere Ansichten"-Dropdown-Wrapper
   Ergebnis: der Mobile-User sieht ausschliesslich seine Mobile-Views. */
@media (max-width: 768px) {
    .octo-nav-submenu.octo-nav-has-mobile-views > li:not(.octo-nav-view-mobile-only) {
        display: none !important;
    }
}

/* ============================================================
   "Erledigt"-Schaltflaeche (Glasdesign, Gruen)
   Einheitlich in Dashboard, Terminen, Kalender, Kontakt-Aufgaben
   und in den Aufgaben-Dialogen. Siehe developer/design-system-dev.html
   ============================================================ */
.octo-task-done-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    white-space: nowrap;
    width: auto;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(16, 185, 129, .1);
    border: 1px solid rgba(16, 185, 129, .5);
    color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.octo-task-done-btn:hover:not(:disabled) {
    background: rgba(16, 185, 129, .18);
    border-color: rgba(16, 185, 129, .7);
    color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-task-done-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.octo-task-done-btn .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    color: inherit;
}

/* Kompakte Variante fuer Listen, Tabellen und Kalenderzellen */
.octo-task-done-btn--icon {
    padding: 3px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    gap: 0;
}

.octo-task-done-btn--icon .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* In Kalenderzellen noch etwas kleiner */
.octo-appointment-row .octo-task-done-btn--icon {
    width: 20px;
    height: 20px;
    padding: 2px;
}

.octo-appointment-row .octo-task-done-btn--icon .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
}

/* Im Dashboard auf die Groesse der uebrigen Aktions-Buttons bringen.
   Ohne vertical-align: die Nachbarn in derselben Zelle haben keins, und
   an einem inline-flex-Element richtet es an der Grundlinie aus - der
   Knopf sass dadurch drei Pixel tiefer als sie. */
.octo-tasks-table .octo-task-done-btn--icon {
    width: 28px;
    height: 28px;
}


/* ============================================
   Anzeigedichte: Navigation (ab 2.25.0)

   Die Stufe steht am <html>-Tag (octo_view_html_attributes), gilt also fuer
   jede Seite. Kompakt zieht die Leiste zusammen, damit bei vielen Punkten
   nicht gescrollt werden muss - Struktur und Reihenfolge bleiben gleich.
   ============================================ */
[data-octo-density] {
	--octo-nav-pad: 0.875rem 1.5rem;
	--octo-nav-size: 0.9375rem;
	--octo-nav-icon: 20px;
	--octo-nav-head-pad: 2rem 0.8rem;
	--octo-nav-logo: 50px;
	--octo-nav-sub-pad: 0.75rem 1.5rem 0.75rem 3.5rem;
	--octo-nav-sub-size: 0.875rem;
	--octo-nav-sub-icon: 16px;
}

[data-octo-density="compact"] {
	--octo-nav-pad: 0.4375rem 1.25rem;
	--octo-nav-size: 0.875rem;
	--octo-nav-icon: 17px;
	--octo-nav-head-pad: 1rem 0.8rem;
	--octo-nav-logo: 34px;
	/* Same proportion as the main items (vertical halved, right edge 1.25rem, font one step smaller); the indent stays */
	--octo-nav-sub-pad: 0.375rem 1.25rem 0.375rem 3.5rem;
	--octo-nav-sub-size: 0.8125rem;
	--octo-nav-sub-icon: 14px;
}

.octo-nav-link .dashicons {
	font-size: var(--octo-nav-icon, 20px);
	width: var(--octo-nav-icon, 20px);
	height: var(--octo-nav-icon, 20px);
}

/* Der Umschalter in der Seitenleiste: dunkler Grund, deshalb eigene Toenung */
.octo-sidebar-density {
	margin-bottom: 10px;
}

.octo-sidebar-density .octo-density-switch {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

/* ⚠️ Zwei Klassen - diese Regel schlaegt die aus octo-buttons.css. Genau
   deshalb blieb der Umschalter grau, nachdem die Basisklasse dort schon auf
   die Seitenleisten-Rolle umgestellt war (gemessen: 3.04). Wer die eine
   aendert, muss die andere mitaendern. */
.octo-sidebar-density .octo-density-option {
	flex: 1;
	justify-content: center;
	color: var(--octo-c-sidebar-text, #d1d5db);
}

.octo-sidebar-density .octo-density-option:hover {
	color: var(--octo-c-border, #e5e7eb);
}

/* Der aktive Zustand traegt den Akzent - auf der dunklen Leiste war eine
   blosse Aufhellung zu leise, man sah nicht, was gerade gilt. */
.octo-sidebar-density .octo-density-option.is-active {
	background: rgba(224, 144, 0, 0.20);
	color: var(--octo-c-on-dark, #ffffff);
	box-shadow: inset 0 0 0 1px rgba(224, 144, 0, 0.55);
}

.octo-sidebar-density .octo-density-option.is-active svg {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Tag-Filter als Chips (2.59.9)
   Ersetzt das Mehrfach-Select im Filter-Builder (Ansichten + Export).
   Aus: neutrale Rollen, kein Farbstich. An: Akzentflaeche mit ihrer
   eigenen Schriftrolle, beide wechseln gemeinsam mit dem Schema.
   ============================================ */
.octo-tag-chips {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.octo-tag-chips-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.octo-tag-chips-search {
	flex: 1 1 auto;
	min-width: 0;
}

.octo-tag-chips-count {
	font-size: 0.8rem;
	color: var(--octo-c-muted);
	white-space: nowrap;
}

.octo-tag-chips-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.octo-tag-chips-empty {
	font-size: 13px;
	color: var(--octo-c-muted);
}

.octo-tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--octo-c-border);
	background: var(--octo-c-card-head);
	color: var(--octo-c-text);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s;
}

.octo-tag-chip:hover {
	border-color: var(--octo-c-accent);
}

.octo-tag-chip:focus-visible {
	outline: 2px solid var(--octo-c-accent);
	outline-offset: 2px;
}

.octo-tag-chip.is-active {
	background: var(--octo-c-accent);
	border-color: var(--octo-c-accent);
	color: var(--octo-c-accent-text);
	font-weight: 600;
}
/**
 * Octo Notifications System Styles
 * Modern notification system in OctoSteel design
 * 
 * @package Octoserv
 * @since 0.1.7
 */

/* Container - fixed at top center */
#octo-notification-container {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
	max-width: 90%;
	width: auto;
}

/* Notification base */
.octo-notification {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	/* Nicht "white": die Meldung stand im Dunkelmodus als weisse Platte da, mit
	   heller Schrift (--octo-c-text) darauf - unlesbar. Der Kartengrund traegt
	   beide Schemata. */
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 8px;
	/* Der Haarstrich lag frueher als zweite Schattenebene hier - auf dunklem
	   Grund war schwarz auf schwarz nicht zu sehen. Jetzt ein echter Rand. */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 320px;
	max-width: 500px;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-notification-show {
	opacity: 1;
	transform: translateY(0);
}

/* Content area */
.octo-notification-content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.5;
	font-weight: 500;
}

.octo-notification-content .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.octo-notification-message {
	color: var(--octo-c-text, #111827);
}

/* Close button */
.octo-notification-close {
	background: transparent;
	border: none;
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
	flex-shrink: 0;
	color: var(--octo-c-muted, #6b7280);
}

.octo-notification-close:hover {
	background: var(--octo-c-row-hover, #f9fafb);
	color: var(--octo-c-text, #111827);
}

.octo-notification-close .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* Der Streifen traegt die Aussage der Meldung. Als satte Farbe stand er im
   Dunkelmodus mit 2,7:1 auf dem dunklen Kartengrund - zu wenig fuer eine
   Flaeche, die etwas bedeutet. --octo-ink hellt ihn dort auf, genau wie das
   Symbol daneben; hell bleibt der Wert unveraendert. */

/* Success variant – Glass Green */
.octo-notification-success {
	border-left: 4px solid color-mix(in srgb, #2e7d32 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-success .octo-notification-content .dashicons {
	color: color-mix(in srgb, #2e7d32 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Error variant – Glass Red */
.octo-notification-error {
	border-left: 4px solid color-mix(in srgb, #c62828 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-error .octo-notification-content .dashicons {
	color: color-mix(in srgb, #c62828 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Warning variant – Glass Red */
.octo-notification-warning {
	border-left: 4px solid color-mix(in srgb, #c62828 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-warning .octo-notification-content .dashicons {
	color: color-mix(in srgb, #c62828 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Info variant – Glass Blue */
.octo-notification-info {
	border-left: 4px solid color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-info .octo-notification-content .dashicons {
	color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Responsive */
@media (max-width: 640px) {
	#octo-notification-container {
		top: 10px;
		max-width: 95%;
	}
	
	.octo-notification {
		min-width: 280px;
		padding: 14px 16px;
		font-size: 14px;
	}
	
	.octo-notification-content .dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}
}
/**
 * Octoserv Contacts Styles
 * Based on DCS-DatenSuite Design
 * 
 * @package Octoserv
 * @since 0.1.1
 */

/* Remove WordPress Admin Bar margin */
html {
	margin-top: 0 !important;
}

/* ============================================
   Table Styles
   ============================================ */
.octo-contacts-list {
	margin-bottom: 1.5rem;
}

.octo-table-wrapper {
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 1.5rem;
	overflow-x: auto;
}

@media (max-width: 768px) {
	.octo-table-wrapper {
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
}

.octo-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.octo-table {
		font-size: 0.875rem; /* 16px - groesser fuer bessere Lesbarkeit */
	}
}

.octo-table thead {
	background: var(--octo-c-card-head, #f9fafb);
	border-bottom: 2px solid var(--octo-c-border, #e5e7eb);
}

.octo-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s, color 0.2s;
}

@media (max-width: 768px) {
	.octo-table th {
		white-space: normal;
		padding: 0.75rem 0.5rem;
		font-size: 0.875rem;
	}
}

.octo-table th:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-th-content {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.octo-sort-indicator {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.octo-sort-indicator:before {
	content: '⇅';
	font-size: 14px;
	color: var(--octo-c-muted, #6b7280);
}

.octo-table th[data-sorted="asc"] {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 700;
}

.octo-table th[data-sorted="asc"] .octo-sort-indicator:before {
	content: '↑';
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-table th[data-sorted="desc"] {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 700;
}

.octo-table th[data-sorted="desc"] .octo-sort-indicator:before {
	content: '↓';
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-table tbody tr {
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
	transition: background 0.2s;
	cursor: pointer;
}

.octo-table tbody tr:hover {
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-table td {
	padding: 0.75rem 1rem;
	color: var(--octo-c-text, #111827);
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.octo-table td {
		white-space: normal;
		max-width: none;
		padding: 0.75rem 0.5rem;
		word-break: break-word;
		font-size: 0.875rem;
	}
}

.octo-text-center {
	text-align: center !important;
}

/* Subtle clickable links for email/phone */
.octo-contact-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s;
}

.octo-contact-link:hover {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Color Marker Column
   ============================================ */
.octo-color-col {
	width: 5px;
	min-width: 5px;
	max-width: 5px;
	padding: 0 !important;
	margin: 0 !important;
}

.octo-table tbody tr td.octo-color-marker {
	padding: 0 !important;
	margin: 0 !important;
	width: 5px;
	min-width: 5px;
	max-width: 5px;
}

/* ============================================
   Actions Column
   ============================================ */
.octo-actions-col {
	width: 90px;
	min-width: 90px;
}

@media (max-width: 768px) {
	.octo-actions-col {
		min-width: 80px !important;
		width: 80px !important;
	}
}

.octo-table .octo-actions {
	white-space: nowrap;
	text-align: left;
	width: 90px;
	min-width: 90px;
	position: sticky;
	left: 5px;
	background: var(--octo-c-card-head, #f9fafb);
	z-index: 10;
	box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
	.octo-table .octo-actions {
		min-width: 80px !important;
		width: 80px !important;
	}
}

.octo-table tbody tr td.octo-actions {
	position: sticky;
	left: 5px;
	background: var(--octo-c-card, #ffffff);
	z-index: 5;
	border-right: 2px solid var(--octo-c-border, #e5e7eb);
	box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
	.octo-table tbody tr td.octo-actions {
		min-width: 80px !important;
		width: 80px !important;
	}

	.octo-btn-icon {
		width: 32px !important;
		height: 32px !important;
		font-size: 16px !important;
		margin-right: 0.5rem !important;
		padding: 4px !important;
		border-width: 1px !important;
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.octo-btn-icon:last-child {
		margin-right: 0 !important;
	}
}

.octo-table tbody tr:hover td.octo-actions {
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	background: var(--octo-c-card-head, #f9fafb);
	color: var(--octo-c-text, #111827);
	cursor: pointer;
	transition: all 0.15s;
	margin-right: 0.375rem;
	font-size: 16px;
}

.octo-btn-icon:hover {
	background: var(--octo-c-border, #e5e7eb);
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-btn-edit {
	color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text));
	background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card));
	border-color:color-mix(in srgb, #6ee7b7 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-edit:hover {
	background:color-mix(in srgb, #a7f3d0 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text));
	border-color:color-mix(in srgb, #34d399 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-delete {
	color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text));
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
	border-color:color-mix(in srgb, #fca5a5 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-btn-delete:hover {
	background: color-mix(in srgb, #fecaca var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
	border-color: #f87171;
}

/* ============================================
   Dropdown in Table
   ============================================ */
.octo-field-dropdown {
	width: 100%;
	min-width: 150px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-family: inherit;
	background: var(--octo-c-card, #ffffff);
	cursor: pointer;
	transition: all 0.2s;
}

@media (max-width: 768px) {
	.octo-field-dropdown {
		font-size: 0.875rem; /* 16px to prevent iOS auto-zoom */
		min-width: 100px;
	}
}

.octo-field-dropdown:hover {
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-field-dropdown:focus {
	outline: none;
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.octo-field-dropdown:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--octo-c-page, #f3f4f6);
}

.octo-table td:has(select) {
	min-width: 180px;
	max-width: 250px;
}

/* ============================================
   Pagination
   ============================================ */
.octo-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-pagination:empty {
	display: none;
}

.octo-pagination-info {
	color: var(--octo-c-muted, #6b7280);
	font-size: 0.875rem;
}

.octo-pagination-buttons {
	display: flex;
	gap: 0.5rem;
}

.octo-pagination-btn {
	padding: 0.5rem 1rem;
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	color: var(--octo-c-text, #111827);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.octo-pagination-btn:hover:not(:disabled) {
	background: var(--octo-c-card-head, #f9fafb);
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-pagination-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.octo-pagination-btn.active {
	background: #00689B;
	color:var(--octo-c-on-dark, #ffffff);
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

/* ============================================
   Toolbar
   ============================================ */
.octo-contacts-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-toolbar-left {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-toolbar-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

/* Der Hilfe-Knopf im <h2> ist eine Schaltflaeche mit eigener Hoehe und zieht
   die Zeilenbox nach unten - der Titel stand dadurch nicht auf einer Achse mit
   Suchfeld und Schaltflaechen. Dasselbe Muster wie .octo-detail-title. */
.octo-section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
	margin: 0;
	line-height: 1;
}

.octo-section-title .octo-help-trigger {
	flex-shrink: 0;
	line-height: 1;
}

.octo-search-input {
	width: 250px;
	min-width: 200px;
	max-width: 350px;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	flex-shrink: 1;
}

.octo-input {
	width: 100%;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--octo-c-text, #111827);
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.octo-input:focus {
	outline: none;
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.octo-error {
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 500;
}

/* ============================================
   Modal
   ============================================ */
.octo-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
}

.octo-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.octo-modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background:var(--octo-c-card, #fff);
	border-radius: 0.5rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.octo-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
}

.octo-modal-header h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
}

.octo-modal-close {
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--octo-c-muted, #6b7280);
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	transition: all 0.2s;
}

.octo-modal-close:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: var(--octo-c-text, #111827);
}

.octo-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.octo-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1.5rem;
	border-top: 1px solid var(--octo-c-border, #e5e7eb);
}

/* Small modal (for confirm dialogs) */
.octo-modal-small {
	max-width: 400px;
}

.octo-modal-small .octo-modal-header {
	padding: 1rem 1.25rem;
}

.octo-modal-small .octo-modal-body {
	padding: 1rem 1.25rem;
}

.octo-modal-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--octo-c-border, #e5e7eb);
}

.octo-modal-actions .octo-btn {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	border-radius: 0.375rem;
}

.octo-btn-confirm {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
}

.octo-btn-confirm:hover {
	background: #c27a00;
}

/* ============================================
   Sticky Toolbar - Desktop
   ============================================ */
.octo-contacts-toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--octo-c-card, #ffffff);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
	/* Gesamte Toolbar am unteren Bildschirmrand fixieren */
	.octo-contacts-toolbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		z-index: 20;
		background: var(--octo-c-card, #ffffff);
		padding: 0.75rem;
		margin: 0;
		border-top: 1px solid var(--octo-c-border, #e5e7eb);
		border-bottom: none;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Titel auf Mobil ausblenden */
	.octo-toolbar-left {
		display: none;
	}

	.octo-toolbar-right {
		flex: 1;
		gap: 0.4rem;
		width: 100%;
	}

	/* Suchfeld volle Breite */
	.octo-search-input {
		flex: 1 1 0;
		min-width: 80px;
		max-width: none;
		width: auto;
		font-size: 0.875rem;
	}

	/* Buttons kompakt */
	.octo-toolbar-right .octo-btn {
		padding: 0.4rem 0.5rem;
		font-size: 0.8rem;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Platz am unteren Rand fuer die fixierte Toolbar */
	.octo-contacts-list {
		padding-bottom: 70px;
	}

	.octo-pagination {
		flex-direction: column;
		align-items: stretch;
	}

	.octo-pagination-buttons {
		justify-content: center;
	}
}

/* ============================================
   Hovercard (Quick Info Popup)
   ============================================ */
.octo-hovercard {
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border-radius: 0.5rem;
	min-width: 240px;
	max-width: 320px;
	padding: 0.75rem;
}

.octo-hovercard-content {
	font-size: 0.8rem;
	color: var(--octo-c-text, #111827);
	line-height: 1.4;
}

.octo-hovercard-name {
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0 8px;
}

.octo-hovercard-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 10px;
	row-gap: 4px;
	align-items: start;
}

.octo-hovercard-label {
	color: var(--octo-c-muted, #4b5563);
}

.octo-hovercard-value a {
	color: inherit;
	text-decoration: none;
}

.octo-hovercard-value a:hover {
	text-decoration: underline;
}

.octo-hovercard-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0 8px;
}

/* Interactive marker for last name hover target */
.octo-contact-lastname {
	cursor: pointer;
	color: inherit;
	transition: color 0.2s;
}

.octo-contact-lastname:hover {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	text-decoration: underline;
}

/* Hovercard buttons with DCS colors */
.octo-hovercard .octo-btn {
	font-size: 0.8rem;
	padding: 0.3rem 0.5rem;
	border-radius: 0.375rem;
	border: none;
	color: var(--octo-c-on-dark, #ffffff);
	width: 100%;
	cursor: pointer;
	transition: filter 0.2s;
}

.octo-hovercard .octo-hc-open {
	background: var(--octo-c-accent, #e09000);
}

.octo-hovercard .octo-hc-open:hover {
	filter: brightness(0.95);
}

.octo-hovercard .octo-hc-note {
	background: #003450;
}

.octo-hovercard .octo-hc-note:hover {
	filter: brightness(1.1);
}

.octo-hovercard .octo-hc-task {
	background: #006899;
}

.octo-hovercard .octo-hc-task:hover {
	filter: brightness(1.1);
}

@media (max-width: 768px) {
	.octo-hovercard {
		min-width: 280px;
		max-width: 90vw;
		padding: 1rem;
	}

	.octo-hovercard-content {
		font-size: 0.875rem;
		line-height: 1.6;
	}

	.octo-hovercard-name {
		font-size: 0.875rem;
		margin-bottom: 0.75rem;
	}

	.octo-hovercard-grid {
		column-gap: 12px;
		row-gap: 8px;
	}

	.octo-hovercard .octo-btn {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}

	.octo-hovercard-actions {
		gap: 0.75rem;
		margin-top: 1rem;
	}
}

/* ============================================
   Contact Create/Detail Page
   ============================================ */
.octo-contact-detail {
	padding: 2rem 0;
}

.octo-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.octo-detail-header-left {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.octo-detail-header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.octo-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--octo-c-muted, #6b7280);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.2s;
}

.octo-back-link:hover {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-detail-title {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--octo-c-text, #111827);
	margin: 0;
}

/* Grid Layout for Boxes */
.octo-detail-grid {
	display: grid;
	gap: 1.5rem;
}

.octo-detail-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Box Styles */
.octo-detail-box {
	background: var(--octo-c-card, #ffffff);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.octo-box-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.5rem;
	background: var(--octo-c-card-head, #f9fafb);
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
}

.octo-box-header .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-box-header h3 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
}

.octo-box-content {
	padding: 1.5rem;
}

.octo-detail-box.box-company_info {
	overflow: visible;
}

/* Field List in Boxes */
.octo-field-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.octo-field-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 1rem;
	align-items: center;
}

.octo-field-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
}

.octo-field-label .octo-required {
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	margin-left: 0.25rem;
}

.octo-field-value {
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
}

.octo-input-full {
	width: 100%;
	max-width: 100%;
}

/* Edit Mode Inputs */
.edit-mode .octo-input,
.edit-mode .octo-field-dropdown {
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
}

.edit-mode .octo-input:focus,
.edit-mode .octo-field-dropdown:focus {
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 0 0 3px rgba(0, 104, 155, 0.1);
}

/* Duplicate Warnings (inline in template) */
/* Styles are mostly inline but here are overrides if needed */

/* Responsive */
@media (max-width: 768px) {
	.octo-detail-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.octo-detail-header-right {
		width: 100%;
		justify-content: stretch;
	}
	
	.octo-detail-header-right .octo-btn {
		flex: 1;
	}
	
	.octo-field-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* =====================================================================
 * Status-Icons Spalte (Notizen / Aufgaben / Dateien / Aktive Kampagnen)
 * pro Ansicht aktivierbar über den Ansichten-Editor.
 * ===================================================================== */
.octo-status-icons-col {
	width: 60px;
	text-align: center;
}

.octo-status-icons {
	padding: 4px 6px;
	vertical-align: middle;
}

.octo-status-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	color: var(--octo-c-border, #e5e7eb); /* inaktiv: Border-Grau aus Design-System */
	transition: color .15s ease;
}

/* Grid-Layout auf dem Inner-Wrapper (analog Vertikal-Modus) –
 * seit v2.2.85 sind die Icons in einem <div class="octo-status-icons-inner"> */
.octo-status-icons--grid .octo-status-icons-inner {
	display: grid;
	grid-template-columns: repeat(2, 18px);
	grid-auto-rows: 18px;
	gap: 4px;
	width: max-content;
	margin: 0 auto;
}

/* <td> bleibt table-cell (Standard); vertical-align: middle sorgt für
 * vertikale Zentrierung des Inner-Wrappers innerhalb der Zeilenhöhe.
 * Flex-Stapeln der Icons passiert im Wrapper darunter. */
.octo-status-icons--vertical .octo-status-icons-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 12px;
	margin: 0 auto;
}
/* Vertikal-Modus: Spalte auf exakte Icon-Breite komprimieren.
 * Wichtig: Sowohl <td> (Body) als auch <th> (Header) müssen die width-
 * Regel erhalten – im Table-Layout gewinnt die breiteste Zelle einer
 * Spalte. Header-Klasse ist .octo-status-icons-col--vertical
 * (von contacts.js beim Rendern gesetzt). */
.octo-table td.octo-status-icons--vertical,
.octo-table th.octo-status-icons-col--vertical {
	padding-left: 16px;
	padding-right: 8px;
	padding-top: 0;
	padding-bottom: 0;
	width: 36px;
	min-width: 36px;
}
/* Kompakte Icons im Vertikal-Modus, damit die Zeilenhöhe nicht wächst */
.octo-status-icons--vertical .octo-status-icons-inner .octo-status-icon {
	font-size: 12px;
	width: 12px;
	height: 12px;
	line-height: 12px;
}

/* Aktive Zustände – Octoserv-Palette (sh-blue-700 / primary-orange / green / sh-blue-900) */
.octo-status-icon.is-active[data-flag="notes"]     { color: color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); } /* Octo-Primärblau */
.octo-status-icon.is-active[data-flag="tasks"]     { color: color-mix(in srgb, #800000 var(--octo-ink, 100%), var(--octo-c-text)); } /* Weinrot */
.octo-status-icon.is-active[data-flag="files"]     { color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)); } /* Grün (Dateien/Erfolg) */
.octo-status-icon.is-active[data-flag="campaigns"] { color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); } /* Primary Orange */

/* Glass-Effekt – aktive Icons wirken zurückhaltender, nicht mehr dominant */
.octo-status-icon.is-active {
	opacity: 0.75;
	filter: saturate(0.9);
}

/* Layout-Radio-Gruppe im Ansichten-Editor */
.octo-status-icons-layout-group {
	display: flex;
	gap: 16px;
	margin-top: 6px;
	transition: opacity .15s ease;
}
.octo-status-icons-layout-group[data-disabled="1"] {
	opacity: 0.45;
}
.octo-status-icons-layout-group .octo-radio-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	cursor: pointer;
}
.octo-status-icons-layout-group[data-disabled="1"] .octo-radio-label {
	cursor: not-allowed;
}

/* Mobil (<768px): Grid wird zu kompaktem Vertikal, egal was die Ansicht sagt */
@media (max-width: 767px) {
	.octo-status-icons-col { width: 12px; }
	.octo-table td.octo-status-icons--grid,
	.octo-table th.octo-status-icons--grid {
		padding-left: 0;
		padding-right: 0;
		width: 12px;
		min-width: 12px;
	}
	.octo-status-icons--grid .octo-status-icons-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 12px;
		grid-template-columns: none;
		grid-auto-rows: auto;
	}
	.octo-status-icons--grid .octo-status-icons-inner .octo-status-icon {
		font-size: 12px;
		width: 12px;
		height: 12px;
		line-height: 12px;
	}
}

/* ============================================
   Mobile Layout: Name + Status kompakt (2.3.4)
   Eine Datenspalte, Actions schmaler, Status als Chip unter dem Namen.
   ============================================ */
@media (max-width: 768px) {
	/* Actions-Spalte deutlich kompakter */
	.octo-actions-col,
	.octo-table .octo-actions,
	.octo-table tbody tr td.octo-actions {
		min-width: 64px !important;
		width: 64px !important;
		padding-left: 0.35rem !important;
		padding-right: 0.35rem !important;
	}

	.octo-table tbody tr td.octo-actions {
		/* Sticky-Schatten ist auf schmalem Bildschirm zu prominent */
		box-shadow: none;
		border-right: 1px solid var(--octo-c-border, #e5e7eb);
	}

	/* Buttons: kleiner, weniger Abstand */
	.octo-table tbody tr td.octo-actions .octo-btn-icon {
		width: 28px !important;
		height: 28px !important;
		font-size: 14px !important;
		margin-right: 0.2rem !important;
	}
	.octo-table tbody tr td.octo-actions .octo-btn-icon:last-child {
		margin-right: 0 !important;
	}

	/* Namens-Zelle: nutzt den restlichen Platz, kein Umbruch am Namen */
	.octo-mobile-namecell {
		padding: 0.5rem 0.6rem !important;
		line-height: 1.25;
	}
	.octo-mobile-namecell .octo-mobile-name {
		display: block;
		font-weight: 600;
		font-size: 0.95rem;
		color: var(--octo-c-text, #111827);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.octo-mobile-namecell .octo-mobile-status-chip {
		display: inline-block;
		margin-top: 0.3rem;
		padding: 4px 12px;
		border-radius: 999px;
		font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.35;
		color: var(--octo-c-text, #111827);
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border: 1px solid rgba(0, 0, 0, 0.08);
		font-family: inherit;
	}

	/* <select>-Variante: nativen Look entfernen, aber Chip-Optik + kleiner Pfeil,
	   damit der Verkaeufer erkennt, dass er tippen kann. Native iOS/Android-Picker
	   oeffnet trotzdem sofort bei Tap. */
	select.octo-mobile-status-chip {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
		padding-right: 26px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231f2937' d='M0 0l5 6 5-6z'/></svg>");
		background-repeat: no-repeat;
		background-position: right 9px center;
		background-size: 8px 5px;
		/* Die globale .octo-field-dropdown-Regel setzt min-width 100px auf Mobil –
		   fuer den Chip nicht erwuenscht, sonst sprengt er die Zeile. */
		width: auto;
		min-width: 0;
		/* Font 0.85rem waere iOS-Auto-Zoom-Trigger; wir setzen 16px per zoom-safe
		   Trick: Skalieren via transform ist zu fragil, also lassen wir 16px und
		   reduzieren die visuelle Groesse ueber Padding. Kompromiss zu Zoom-Sicherheit. */
		font-size: 16px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	select.octo-mobile-status-chip:focus {
		outline: none;
		box-shadow: 0 0 0 2px rgba(0, 104, 155, 0.35);
	}

	/* Namens-Zelle: globales .octo-table td:has(select) { min-width: 180px }
	   wuerde die Zelle sonst sprengen. Auf Mobil aufheben. */
	.octo-mobile-namecell,
	.octo-mobile-namecell:has(select) {
		min-width: 0 !important;
		max-width: none !important;
	}
}
/**
 * DCS-SalesHub Layout Builder Styles
 * 
 * Styles for the layout builder including:
 * - Tab navigation
 * - Layout selection grid
 * - Drag & Drop builder interface
 *
 * @package DCS_SalesHub
 * @since 1.0.0
 */

/* ============================================
   Tab Navigation
   ============================================ */
.octo-tab-nav {
	display: flex;
	gap: 0.5rem;
	border-bottom: 2px solid var(--octo-c-border, #e5e7eb);
	margin-bottom: 2rem;
	padding: 0 0.5rem;
}

.octo-tab-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--octo-c-muted, #6b7280);
	transition: all 0.2s;
	position: relative;
	bottom: -2px;
}

.octo-tab-btn:hover {
	color: var(--octo-c-text, #111827);
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-tab-btn.active {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	border-bottom-color: #e09000;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-tab-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Tab Content */
.octo-tab-content {
	display: none;
}

.octo-tab-content.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

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

/* ============================================
   Layout Selection Grid
   ============================================ */
.octo-layout-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.octo-layout-option {
	cursor: pointer;
	margin: 0;
}

.octo-layout-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.octo-layout-preview {
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	padding: 1rem;
	background: var(--octo-c-card, #ffffff);
	transition: all 0.2s;
	text-align: center;
}

.octo-layout-option:hover .octo-layout-preview {
	border-color: #e09000;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.octo-layout-option input:checked + .octo-layout-preview {
	border-color: #e09000;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
	box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.1);
}

.octo-layout-visual {
	display: flex;
	gap: 4px;
	height: 60px;
	margin-bottom: 0.75rem;
	justify-content: center;
}

.octo-layout-visual .octo-col {
	background: #e09000;
	border-radius: 0.25rem;
	opacity: 0.7;
	transition: all 0.2s;
}

.octo-layout-option:hover .octo-layout-visual .octo-col,
.octo-layout-option input:checked + .octo-layout-preview .octo-layout-visual .octo-col {
	opacity: 1;
}

.octo-layout-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
}

.octo-layout-option input:checked + .octo-layout-preview .octo-layout-label {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 600;
}

/* ============================================
   Drag & Drop Builder Container
   ============================================ */
.octo-builder-container {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
	min-height: 400px;
}

/* ============================================
   Box Pool (Available Boxes)
   ============================================ */
.octo-box-pool {
	background: var(--octo-c-card-head, #f9fafb);
	border: 2px dashed var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	padding: 1rem;
}

.octo-box-pool h4 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.octo-box-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 50px;
}

.octo-box-item {
	padding: 0.75rem;
	background: var(--octo-c-card, #ffffff);
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	cursor: move;
	transition: all 0.2s;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-align: left;
	/* Flexbox for proper icon alignment */
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.octo-box-item:hover {
	border-color: #e09000;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.octo-box-item.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

.octo-box-item.ghost {
	opacity: 0.3;
	border-style: dashed;
}

.octo-box-item .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

.octo-box-item span {
	word-break: break-word;
	flex-shrink: 0;
}

/* Label text should grow to fill space */
.octo-box-label {
	flex: 1;
	word-break: break-word;
}

/* Name and switches share one row while the name fits; a longer name pushes the
   switch group into a second row (right-aligned). Very long names hyphenate. */
.octo-box-item {
	flex-wrap: wrap;
	row-gap: 6px;
}

.octo-box-item .octo-box-label {
	flex: 1 0 auto;
	max-width: calc(100% - 64px); /* handle 18 + 12 margin + 8 gap + icon 18 + 8 gap */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

.octo-box-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

/* Mobile Toggle Button */
.octo-mobile-toggle {
	background: transparent;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
	margin-left: auto;
}

.octo-mobile-toggle:hover {
	opacity: 0.7;
}

.octo-mobile-toggle .dashicons {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)) !important;
}

.octo-mobile-toggle[data-mobile="true"] .dashicons {
	color:color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)) !important;
}

/* Box Collapse State Toggle in Builder */
.octo-box-collapse-toggle {
	background: transparent;
	border: none;
	padding: 0.25rem 0.375rem;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
}

.octo-box-collapse-toggle:hover {
	background: var(--octo-c-border, #e5e7eb);
}

.octo-box-collapse-toggle .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	color: var(--octo-c-muted, #6b7280) !important;
}

.octo-box-item[data-default-collapsed="true"] .octo-box-collapse-toggle .dashicons {
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)) !important;
}

.octo-box-item[data-default-collapsed="true"] {
	opacity: 0.7;
}

/* ============================================
   Columns Container (Drop Zones)
   ============================================ */
.octo-columns-container {
	display: flex;
	gap: 1rem;
	flex: 1;
}

.octo-column {
	flex: 1;
	background: var(--octo-c-card, #ffffff);
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	padding: 1rem;
	min-height: 300px;
}

.octo-column h4 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--octo-c-border, #e5e7eb);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Drop Zone Styling */
.octo-drop-zone {
	min-height: 200px;
	border: 2px dashed transparent;
	border-radius: 0.375rem;
	padding: 0.5rem;
	transition: all 0.2s;
}

.octo-drop-zone.drag-over {
	border-color: #e09000;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-drop-placeholder {
	text-align: center;
	color: var(--octo-c-muted, #6b7280);
	font-size: 0.875rem;
	padding: 2rem;
	font-style: italic;
}

/* The hint stays inside the zone, so :empty never matched; hide it once a box is there. */
.octo-drop-zone:has(.octo-box-item) .octo-drop-placeholder {
	display: none;
}

.octo-drop-placeholder {
	pointer-events: none;
}

/* Box in Column */
.octo-drop-zone .octo-box-item {
	margin-bottom: 0.5rem;
}

.octo-drop-zone .octo-box-item:last-child {
	margin-bottom: 0;
}

/* Remove Button for Boxes in Columns */
.octo-box-item-remove {
	padding: 0.25rem;
	background: transparent;
	border: none;
	color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text));
	cursor: pointer;
	border-radius: 0.25rem;
	transition: all 0.2s;
	display: block;
	flex-shrink: 0;
}

.octo-box-item-remove:hover {
	background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card));
}

.octo-box-item-remove .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ============================================
   Responsive Layout Builder
   ============================================ */
@media (max-width: 768px) {
	.octo-builder-container {
		grid-template-columns: 1fr;
	}
	
	.octo-box-pool {
		order: 2;
	}
	
	.octo-columns-container {
		flex-direction: column;
	}
	
	.octo-layout-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.octo-tab-nav {
		flex-direction: column;
		gap: 0.25rem;
	}
	
	.octo-tab-btn {
		border-bottom: none;
		border-left: 3px solid transparent;
		padding-left: 1rem;
	}
	
	.octo-tab-btn.active {
		border-bottom: none;
		border-left-color: #e09000;
	}
	
	.octo-layout-options {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   Empty State
   ============================================ */
.octo-box-pool .octo-box-list:empty::after {
	content: 'Alle Boxen wurden platziert';
	display: block;
	text-align: center;
	color: var(--octo-c-muted, #6b7280);
	font-size: 0.8125rem;
	padding: 2rem 1rem;
	font-style: italic;
}

/* ============================================
   Drag Feedback
   ============================================ */
.octo-box-item.sortable-chosen {
	opacity: 0.8;
	cursor: grabbing;
}

.octo-box-item.sortable-drag {
	opacity: 0.9;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: rotate(2deg);
}
/**
 * DCS-SalesHub Frontend Styles
 * Mobile-First Design - Completely standalone
 * 
 * @package DCS_SalesHub
 * @since 1.0.0
 */

/* ============================================
   CSS Reset & Base Styles
   ============================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: 100%;
}

.octo-body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--octo-c-text, #111827);
	background: var(--octo-c-page, #f3f4f6);
	min-height: 100vh;
	overflow-x: hidden;
}

/* ============================================
   Login Page Styles (Mobile First)
   ============================================ */
.octo-login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: linear-gradient(135deg, #00689B 0%, #764ba2 100%);
	min-height: 100vh;
}

.octo-login-container {
    width: 100%;
	max-width: 400px;
}

.octo-login-card {
	background: var(--octo-c-card, #ffffff);
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	padding: 2rem 1.5rem;
	width: 100%;
}

/* Logo Section */
.octo-login-logo {
	text-align: center;
	margin-bottom: 2rem;
}

.octo-logo-img {
	max-width: 180px;
	max-height: 60px;
	width: auto;
	height: auto;
	margin: 0 auto 1rem;
	display: block;
	object-fit: contain;
}

.octo-logo-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #00689B 0%, #764ba2 100%);
	border-radius: 1rem;
	color: var(--octo-c-on-dark, #ffffff);
	margin-bottom: 1rem;
}

.octo-login-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--octo-c-text, #111827);
	margin-bottom: 0.5rem;
}

.octo-login-subtitle {
	font-size: 0.875rem;
	color: var(--octo-c-muted, #6b7280);
}

/* Form Styles */
.octo-login-form {
	margin-bottom: 1.5rem;
}

.octo-form-field {
	margin-bottom: 1.25rem;
}

.octo-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
	margin-bottom: 0.5rem;
}

.octo-input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.octo-input-icon {
	position: absolute;
	left: 1rem;
	color: var(--octo-c-muted, #6b7280);
	pointer-events: none;
	z-index: 1;
}

.octo-input {
	width: 100%;
	padding: 0.75rem 1rem 0.75rem 3rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--octo-c-text, #111827);
	background: var(--octo-c-card-head, #f9fafb);
	border: 2px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.5rem;
	transition: all 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.octo-input:focus {
	outline: none;
	background: var(--octo-c-card, #ffffff);
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.octo-input-password {
	padding-right: 3rem;
}

/* Password Toggle */
.octo-password-toggle {
	position: absolute;
	right: 0.75rem;
	padding: 0.5rem;
	background: transparent;
	border: none;
	color: var(--octo-c-muted, #6b7280);
	cursor: pointer;
	transition: color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.octo-password-toggle:hover,
.octo-password-toggle:focus {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	outline: none;
}

/* Form Options */
.octo-form-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.octo-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	width: 100%;
}

.octo-checkbox-input {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	cursor: pointer;
	accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-checkbox-label {
	font-size: 0.875rem;
	color: var(--octo-c-text, #111827);
	user-select: none;
}

.octo-link {
	color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text));
	text-decoration: none;
	transition: color 0.2s;
}

.octo-link:hover {
	color: color-mix(in srgb, #764ba2 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-link-small {
	font-size: 0.875rem;
}

/* Alert Messages */
.octo-alert {
	display: flex;
	align-items: flex-start;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.octo-alert-error {
	background: color-mix(in srgb, #fef2f2 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text));
	border:1px solid color-mix(in srgb, #fecaca var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-alert-success {
	background: color-mix(in srgb, #f0fdf4 var(--octo-tint, 100%), var(--octo-c-card));
	color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text));
	border:1px solid color-mix(in srgb, #bbf7d0 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-alert-icon {
	flex-shrink: 0;
	margin-right: 0.75rem;
}

.octo-alert-text {
	flex: 1;
}

/* Buttons */
.octo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.2s;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	min-height: 40px;
	width: 100%;
}

.octo-btn-primary {
	background: linear-gradient(135deg, #00689B 0%, #764ba2 100%);
	color: var(--octo-c-on-dark, #ffffff);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.octo-btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.octo-btn-primary:active:not(:disabled) {
	transform: translateY(0);
}

.octo-btn-block {
	width: 100%;
}

.octo-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.octo-btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.octo-btn-icon {
	transition: transform 0.2s;
}

.octo-btn:hover:not(:disabled) .octo-btn-icon {
	transform: translateX(2px);
}

.octo-btn-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Spinner */
.octo-spinner {
	animation: octo-spin 1s linear infinite;
}

.octo-spinner-path {
	stroke: currentColor;
	stroke-linecap: round;
	animation: octo-dash 1.5s ease-in-out infinite;
}

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

@keyframes octo-dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* Footer */
.octo-login-footer {
	border-top: 1px solid var(--octo-c-border, #e5e7eb);
	padding-top: 1.5rem;
}

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

.octo-text-muted {
	color: var(--octo-c-muted, #6b7280);
	font-size: 0.8rem;
}

/* ============================================
   Tablet & Desktop Styles
   ============================================ */
@media (min-width: 768px) {
	.octo-login-card {
		padding: 3rem 2.5rem;
	}
	
	.octo-login-container {
		max-width: 450px;
	}
	
	.octo-login-title {
		font-size: 1.875rem;
	}
	
	.octo-input {
		font-size: 0.875rem;
	}
}

/* ============================================
   Notifications Box (Global)
   ============================================ */
.octo-notifications-box {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 380px;
	max-width: calc(100vw - 40px);
	background: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	z-index: 10000;
	overflow: hidden;
}

.octo-notifications-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--octo-c-card-head, #f9fafb);
	border-bottom: 1px solid var(--octo-c-border, #e5e7eb);
}

.octo-notifications-header .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	flex-shrink: 0;
}

.octo-notifications-header h3 {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--octo-c-text, #111827);
	margin: 0;
	flex: 1;
}

.octo-notifications-count {
	background: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.8rem;
	font-weight: 600;
	min-width: 24px;
	text-align: center;
}

.octo-notifications-list {
	max-height: 400px;
	overflow-y: auto;
}

.octo-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--octo-c-page, var(--octo-c-border, #f3f4f6));
    transition: background-color 0.2s;
}

/* Einrückung auf gleiche Linie wie der Titel in der Headerzeile */
.octo-notification-item {
    padding-left: calc(1.25rem + 24px + 0.75rem);
}

.octo-notification-item:hover {
	background: var(--octo-c-card-head, #f9fafb);
}

.octo-notification-item:last-child {
	border-bottom: none;
}

.octo-notification-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card));
	border-radius: 50%;
	flex-shrink: 0;
}

.octo-notification-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-content {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.octo-notification-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--octo-c-text, #111827);
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.octo-notification-time {
    font-size: 0.8rem;
    color: var(--octo-c-muted, #6b7280);
}

/* Kontaktzeile innerhalb der Erinnerungen */
.octo-notification-contact {
    font-size: 0.8rem;
    color: var(--octo-c-muted, #6b7280);
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    padding-left: 18px; /* Icon überlagern, Text bündig mit Titel */
    line-height: 1.2;
}

.octo-notification-contact .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)) !important;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.octo-notification-contact a {
    font-size: 0.8rem;
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
    text-decoration: none !important;
    font-weight: 700;
}

.octo-notification-contact a:hover {
    text-decoration: none !important;
}

.octo-notification-dismiss {
	background: transparent;
	border: none;
	color: var(--octo-c-muted, #6b7280);
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 0.25rem;
	transition: all 0.2s;
	flex-shrink: 0;
}

.octo-notification-dismiss:hover {
	background: var(--octo-c-page, #f3f4f6);
	color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-notification-dismiss .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

@media (max-width: 640px) {
	.octo-notifications-box {
		bottom: 10px;
		right: 10px;
		width: calc(100vw - 20px);
	}
}

/* ============================================
   Table Dropdowns
   ============================================ */
.octo-field-dropdown,
.octo-table-status-dropdown {
	width: 100%;
	min-width: 180px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-family: inherit;
	background: var(--octo-c-card, #ffffff);
	cursor: pointer;
	transition: all 0.2s;
}

.octo-field-dropdown:hover {
	border-color: var(--octo-c-muted, #6b7280);
}

.octo-field-dropdown:focus,
.octo-table-status-dropdown:focus {
	outline: none;
	border-color: #e09000;
	box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.1);
}

.octo-field-dropdown:disabled,
.octo-table-status-dropdown:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--octo-c-card-head, #f9fafb);
}

/* ============================================
   Utility Classes
   ============================================ */
.octo-hidden {
	display: none !important;
}

.octo-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
/**
 * Octo Help System Styles
 *
 * @package Octoserv
 * @since 1.0.0
 */

/* ===================================
   Hilfe-Icon
   =================================== */

.octo-help-trigger {
    background: rgba(200, 200, 200, 0.25);
    border: none;
    color: var(--octo-c-accent, #e09000);
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Zwei Pixel hoeher: die Grundlinie der Ueberschrift sitzt tiefer als
       ihre Mitte, sonst haengt das Symbol unter der Zeile. */
    top: -2px;
}

.octo-help-trigger:hover {
    background: rgba(224, 144, 0, 0.15);
    transform: scale(1.1);
}

/* Das Dashicon gibt es nur noch in Vorlagen, die den Knopf selbst schreiben
   statt Octo_Help::get_help_button() zu nutzen. */
.octo-help-trigger .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.octo-help-trigger svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Icon im Panel-Header */
.octo-panel-header .octo-help-trigger,
.octo-slide-panel-header .octo-help-trigger {
    margin-left: auto;
    margin-right: 8px;
}

/* Kleinere Variante für Unterseiten/Panels */
.octo-help-trigger.octo-help-sm {
    width: 18px;
    height: 18px;
}

.octo-help-trigger.octo-help-sm .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* ===================================
   Modal Overlay & Container
   =================================== */

.octo-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000; /* Über allen Slide-Panels */
    display: flex;
    align-items: center;
    justify-content: center;
}

.octo-help-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.octo-help-modal-container {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: var(--octo-c-card, #ffffff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Body scroll verhindern wenn Modal offen */
body.octo-help-modal-open {
    overflow: hidden;
}

/* ===================================
   Modal Header
   =================================== */

.octo-help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--octo-c-border, #e5e5e5);
    background: var(--octo-c-card-head, #f9fafb);
}

.octo-help-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--octo-c-text, #111827);
}

.octo-help-modal-title .dashicons {
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.octo-help-modal-close {
    background: transparent;
    border: none;
    color: var(--octo-c-muted, #6b7280);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.octo-help-modal-close:hover {
    background: var(--octo-c-border, #e5e7eb);
    color: var(--octo-c-text, #111827);
}

.octo-help-modal-close .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* ===================================
   Modal Body
   =================================== */

.octo-help-modal-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ===================================
   Hilfe-Inhalt Styling
   =================================== */

.octo-help-content {
    line-height: 1.6;
    color: var(--octo-c-text, #111827);
}

.octo-help-content h2 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    color: var(--octo-c-text, #111827);
}

.octo-help-content h3 {
    margin: 24px 0 12px 0;
    font-size: 0.95rem;
    color: var(--octo-c-text, #111827);
}

.octo-help-content p {
    margin: 0 0 16px 0;
}

/* Nummerierte Listen brauchen denselben Einzug wie Aufzaehlungen - ohne
   ihn standen die Nummern links ausserhalb des Textrands. */
.octo-help-content ul,
.octo-help-content ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.octo-help-content li {
    margin-bottom: 8px;
}

.octo-help-content strong {
    color: var(--octo-c-text, #111827);
}

/* ===================================
   Video Container
   =================================== */

.octo-help-video {
    margin-bottom: 24px;
}

.octo-help-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
}

.octo-help-video-placeholder {
    background: var(--octo-c-card-head, #f9fafb);
    border: 2px dashed var(--octo-c-border, #e5e7eb);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: var(--octo-c-muted, #6b7280);
}

.octo-help-video-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--octo-c-border, #e5e7eb);
}

.octo-help-video-placeholder p {
    margin: 12px 0 0 0;
    font-size: 0.875rem;
}

/* ===================================
   Platzhalter (Default-Hilfeseite)
   =================================== */

.octo-help-placeholder {
    text-align: center;
    padding: 60px 40px;
    color: var(--octo-c-muted, #6b7280);
}

.octo-help-placeholder .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
    margin-bottom: 20px;
}

.octo-help-placeholder h2 {
    margin: 0 0 16px 0;
    color: var(--octo-c-text, #111827);
    font-size: 1.5rem;
}

.octo-help-placeholder p {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ===================================
   Lade- und Fehlerzustände
   =================================== */

.octo-help-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--octo-c-muted, #6b7280);
}

.octo-help-loading .dashicons.spin {
    animation: octo-spin 1s linear infinite;
}

@keyframes octo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.octo-help-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--octo-c-muted, #6b7280);
}

.octo-help-error .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
    margin-bottom: 16px;
}

.octo-help-error p {
    margin: 0;
}

/* ===================================
   Responsive
   =================================== */

@media (max-width: 768px) {
    .octo-help-modal-container {
        width: 95%;
        max-height: 90vh;
        margin: 20px;
    }

    .octo-help-modal-header {
        padding: 16px;
    }

    .octo-help-modal-body {
        padding: 16px;
    }

    .octo-help-modal-title {
        font-size: 0.875rem;
    }
}
/* Kanban of the pipeline (octoserv-pipeline 2.1.15 assets/css/octo-kanban.css, enqueued with the list) */
/* Kanban Board Container */
.octo-kanban-board {
    padding: 20px 0;
}

.octo-kanban-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
}

.octo-kanban-lanes {
    display: flex;
    gap: 16px;
    min-height: 500px;
    padding-bottom: 20px;
}

/* Lane (Stage) */
.octo-kanban-lane {
    flex: 0 0 320px;
    background:var(--octo-c-card-head, #f9fafb);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.octo-kanban-lane-header {
    padding: 16px;
    border-bottom:2px solid var(--octo-c-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.octo-kanban-lane-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.octo-kanban-add-deal-btn {
    background: var(--octo-c-accent, #e09000);
    color: var(--octo-c-accent-text, #1a1200);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.octo-kanban-add-deal-btn:hover {
    background: #c77f00;
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.octo-kanban-add-deal-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.octo-kanban-lane-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color:var(--octo-c-text, #111827);
}

.octo-kanban-lane-count {
    background:color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card));
    color:var(--octo-c-muted, #6b7280);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.octo-kanban-lane-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sub-Lane (Statuslevel) */
.octo-kanban-sublane {
    background:var(--octo-c-card, #ffffff);
    border:1px solid var(--octo-c-border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.octo-kanban-sublane-header {
    padding: 8px 12px;
    background:var(--octo-c-page, #f3f4f6);
    border-bottom:1px solid var(--octo-c-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.octo-kanban-sublane-title {
    font-size: 13px;
    font-weight: 500;
    color:var(--octo-c-muted, #6b7280);
}

.octo-kanban-sublane-count {
    background:color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card));
    color:var(--octo-c-faint, #9ca3af);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.octo-kanban-sublane-deals {
    padding: 8px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Deal Card */
.octo-kanban-card {
    background:var(--octo-c-card, #ffffff);
    border:1px solid var(--octo-c-border, #e5e7eb);
    border-radius: 6px;
    padding: 12px;
    padding-top: 8px;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.octo-kanban-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--user-color, #e5e7eb);
    border-radius: 6px 6px 0 0;
}

.octo-kanban-card:hover {
    border-color: #e09000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.octo-kanban-card.octo-dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.octo-kanban-card-header {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.octo-kanban-card-title {
    font-weight: 600;
    font-size: 14px;
    color:var(--octo-c-text, #111827);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.octo-kanban-card-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.octo-kanban-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.octo-kanban-badge-primary {
    background:color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card));
    color:color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text));
    border:1px solid color-mix(in srgb, #fbbf24 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-kanban-badge-count {
    background:color-mix(in srgb, #dbeafe var(--octo-tint, 100%), var(--octo-c-card));
    color:color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text));
    border: 1px solid #60a5fa;
}

.octo-kanban-card-body {
    font-size: 13px;
    color:var(--octo-c-muted, #6b7280);
}

.octo-kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.octo-kanban-card-value {
    font-weight: 600;
    color:color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text));
    font-size: 14px;
}

.octo-kanban-card-probability {
    background:color-mix(in srgb, #dbeafe var(--octo-tint, 100%), var(--octo-c-card));
    color:color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text));
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.octo-kanban-card-contact {
    font-size: 0.8rem;
    color:var(--octo-c-faint, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card Placeholder (während Drag) */
.octo-kanban-card-placeholder {
    background:color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card));
    border: 2px dashed #9ca3af;
    border-radius: 6px;
    height: 80px;
    margin: 8px 0;
}


/* Modal - Override nur für Kanban */
#octo-deal-modal.octo-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}

#octo-deal-modal.octo-modal[style*="display: block"] {
    display: flex !important;
}

#octo-deal-modal .octo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#octo-deal-modal .octo-modal-content {
    position: relative !important;
    z-index: 2;
    background:var(--octo-c-card, #ffffff);
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    margin: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

#octo-deal-modal .octo-modal-header {
    padding: 20px;
    border-bottom:1px solid var(--octo-c-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#octo-deal-modal .octo-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color:var(--octo-c-text, #111827);
}

#octo-deal-modal .octo-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color:var(--octo-c-muted, #6b7280);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#octo-deal-modal .octo-modal-close:hover {
    background:var(--octo-c-page, #f3f4f6);
    color:var(--octo-c-text, #111827);
}

#octo-deal-modal .octo-modal-body {
    padding: 20px;
}

#octo-deal-modal .octo-form-group {
    margin-bottom: 16px;
}

#octo-deal-modal .octo-form-group label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color:var(--octo-c-text, #374151);
    margin-bottom: 6px;
}

#octo-deal-modal .octo-form-group input[type="text"],
#octo-deal-modal .octo-form-group input[type="number"],
#octo-deal-modal .octo-form-group input[type="date"],
#octo-deal-modal .octo-form-group input[type="checkbox"],
#octo-deal-modal .octo-form-group select,
#octo-deal-modal .octo-form-group .octo-input {
    width: 100%;
    padding: 8px 12px;
    border:1px solid var(--octo-c-border, #d1d5db);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

#octo-deal-modal .octo-form-group input:focus,
#octo-deal-modal .octo-form-group select:focus {
    outline: none;
    border-color: #e09000;
}

#octo-deal-modal .octo-form-group input:disabled {
    background:var(--octo-c-page, #f3f4f6);
    color:var(--octo-c-muted, #6b7280);
    cursor: not-allowed;
}

#octo-deal-modal .octo-modal-footer {
    padding: 16px 20px;
    border-top:1px solid var(--octo-c-border, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#octo-deal-modal .octo-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#octo-deal-modal .octo-btn-primary {
    background: var(--octo-c-accent, #e09000);
    color: var(--octo-c-accent-text, #1a1200);
}

#octo-deal-modal .octo-btn-primary:hover {
    background: #c77f00;
}

#octo-deal-modal .octo-btn-secondary {
    background:color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card));
    color:var(--octo-c-text, #374151);
}

#octo-deal-modal .octo-btn-secondary:hover {
    background:color-mix(in srgb, #d1d5db var(--octo-tint, 100%), var(--octo-c-card));
}

/* Autocomplete */
.octo-autocomplete-results {
    position: relative;
    background:var(--octo-c-card, #ffffff);
    border:1px solid var(--octo-c-border, #d1d5db);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

.octo-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom:1px solid color-mix(in srgb, #f3f4f6 var(--octo-tint, 100%), var(--octo-c-border));
}

.octo-autocomplete-item:last-child {
    border-bottom: none;
}

.octo-autocomplete-item:hover {
    background:var(--octo-c-card-head, #f9fafb);
}

.octo-contact-name {
    font-weight: 500;
    font-size: 14px;
    color:var(--octo-c-text, #111827);
    margin-bottom: 2px;
}

.octo-contact-email {
    font-size: 0.8rem;
    color:var(--octo-c-muted, #6b7280);
}

.octo-no-results {
    padding: 12px;
    text-align: center;
    color:var(--octo-c-muted, #6b7280);
    font-size: 13px;
}

.octo-selected-contact {
    padding: 10px 12px;
    background:var(--octo-c-page, #f3f4f6);
    border-radius: 4px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.octo-remove-contact {
    background: none;
    border: none;
    color:var(--octo-c-muted, #6b7280);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.octo-remove-contact:hover {
    background:color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card));
    color:var(--octo-c-text, #111827);
}

/* Toast Notifications */
.octo-toast {
    position: fixed;
    top: 80px;
    right: -300px;
    padding: 16px 20px;
    background:var(--octo-c-card, #ffffff);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    transition: right 0.3s ease;
    min-width: 250px;
}

.octo-toast.octo-toast-show {
    right: 20px;
}

.octo-toast-success {
    border-left: 4px solid #10b981;
}

.octo-toast-error {
    border-left: 4px solid #ef4444;
}

.octo-toast-info {
    border-left: 4px solid #3b82f6;
}

/* Loading State */
.octo-loading,
.octo-error {
    text-align: center;
    padding: 40px;
    color:var(--octo-c-muted, #6b7280);
    font-size: 14px;
}

.octo-error {
    color:color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Responsive */
@media (max-width: 768px) {
    .octo-kanban-lanes {
        flex-direction: column;
    }
    
    .octo-kanban-lane {
        flex: 1 1 auto;
    }
}

/* Adjustments für Octoserv Button */
#octo-toggle-display-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#octo-display-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
}
/* ============================================================
   Komponenten aus wiederholten Inline-Styles

   Ein Stil, der in derselben Datei mehrfach identisch auftauchte, ist
   keine Einzelentscheidung - er ist eine Komponente. Diese Datei sammelt
   sie, nach Herkunftsdatei gruppiert.

   Die Deklarationen sind WORTGLEICH uebernommen. Diese Umstellung soll
   nichts besser aussehen lassen, sondern genau wie vorher - sie verschiebt
   nur den Ort. Wer eine Regel verbessern will, tut das jetzt hier, an
   einer Stelle, statt an zwoelf im Markup.

   Die Namen kommen aus der Bedeutung: zahl, kopf, hinweis, warnung,
   erfolg, feld, tabelle. Wo eine Ziffer angehaengt ist, gibt es mehrere
   Varianten derselben Rolle - die zusammenzufuehren ist Handarbeit und
   lohnt sich dort, wo man ohnehin am Modul arbeitet.

   Erzeugt von scripts/inline-zu-komponenten.py --alle
   ============================================================ */

/* --- Octoserv/octoserv/includes/admin/class-octo-admin-smtp.php --- */
/* 5x */
.octo-admin-smtp-head { padding: 10px; background:var(--octo-c-card-head, #f9f9f9); }
/* 2x */
.octo-admin-smtp-span { color: red; }

/* --- Octoserv/octoserv/includes/flow-editor/class-octo-flow-editor-rest.php --- */
/* 16x */
.octo-flow-editor-flow-editor-rest-div { flex-direction:column; align-items:stretch; }
/* 11x */
.octo-flow-editor-flow-editor-rest-block { width:40px; height:32px; padding:2px; cursor:pointer; }
/* 9x */
.octo-flow-editor-flow-editor-rest-block-2 { width:70px; }
/* 8x */
.octo-flow-editor-flow-editor-rest-muted { color:var(--octo-c-muted, #666); }
/* 7x */
.octo-flow-editor-flow-editor-rest-field { min-height:80px; }
/* 5x */
.octo-flow-editor-flow-editor-rest-block-3 { width:80px; }
/* 5x */
.octo-flow-editor-flow-editor-rest-heading { background:none; border:none; color:color-mix(in srgb, #c00 var(--octo-ink, 100%), var(--octo-c-text)); cursor:pointer; font-size: 0.95rem; padding:0 4px; }
/* 5x */
.octo-flow-editor-flow-editor-rest-block-4 { margin:0; }
/* 5x */
.octo-flow-editor-flow-editor-rest-div-2 { flex-direction:column; align-items:stretch; margin-top:8px; }
/* 4x */
.octo-flow-editor-flow-editor-rest-block-5 { font-family:monospace; }
/* 4x */
.octo-flow-editor-flow-editor-rest-muted-2 { color:var(--octo-c-faint, #94a3b8); }
/* 4x */
.octo-flow-editor-flow-editor-rest-label { flex:1; flex-direction:column; align-items:stretch; }
/* 4x */
.octo-flow-editor-flow-editor-rest-div-3 { flex-direction:column; align-items:stretch; gap:6px; }
/* 3x */
.octo-flow-editor-flow-editor-rest-info { color:color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); font-size:11px; }
/* 3x */
.octo-flow-editor-flow-editor-rest-box-info { background:none; border:1px dashed #006B95; color:color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); border-radius:4px; padding:4px 12px; cursor:pointer; font-size: 0.8rem; margin-top:4px; }
/* 3x */
.octo-flow-editor-flow-editor-rest-head { padding:6px 8px; border-bottom:1px solid var(--octo-c-border, #ddd); }
/* 3x */
.octo-flow-editor-flow-editor-rest-cell { padding:4px 8px; border-bottom:1px solid var(--octo-c-border-soft, #eee); }
/* 3x */
.octo-flow-editor-flow-editor-rest-head-2 { text-align:left; padding:6px; border:1px solid var(--octo-c-border, #ddd); }
/* 3x */
.octo-flow-editor-flow-editor-rest-p { margin:6px 0 0; font-size:13px; color:var(--octo-c-text, #333); }
/* 3x */
.octo-flow-editor-flow-editor-rest-div-4 { flex-wrap:wrap; gap:6px; border-top:1px solid var(--octo-c-border, #e2e8f0); padding-top:10px; margin-top:6px; }
/* 3x */
.octo-flow-editor-flow-editor-rest-hint { width:100%; font-weight:600; font-size: 0.8rem; color:var(--octo-c-muted, #475569); margin-bottom:2px; }
/* 3x */
.octo-flow-editor-flow-editor-rest-info-2 { background:#006B95; }
/* 2x */
.octo-flow-editor-flow-editor-rest-div-5 { position:relative; }
/* 2x */
.octo-flow-editor-flow-editor-rest-box-info-2 { background:none; border:1px solid var(--octo-c-border, #ccc); border-radius:4px; padding:4px 8px; cursor:pointer; font-size: 0.875rem; line-height:1; color:color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-flow-editor-flow-editor-rest-p-2 { color:color-mix(in srgb, #dc3232 var(--octo-ink, 100%), var(--octo-c-text)); margin:0; }
/* 2x */
.octo-flow-editor-flow-editor-rest-strong { padding:6px 12px; font-size:11px; font-weight:600; color:var(--octo-c-text, #003450); background:var(--octo-c-card-head, #f5f5f5); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--octo-c-border, #e0e0e0); }
/* 2x */
.octo-flow-editor-flow-editor-rest-muted-3 { cursor:grab; color:var(--octo-c-faint, #999); font-size:14px; padding:0 2px; user-select:none; }
/* 2x */
.octo-flow-editor-flow-editor-rest-box-info-3 { background:none; border:1px solid var(--octo-c-border, #ccc); border-radius:4px; padding:2px 5px; cursor:pointer; font-size:13px; line-height:1; color:color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-flow-editor-flow-editor-rest-table { width:100%; border-collapse:collapse; font-size:13px; }
/* 2x */
.octo-flow-editor-flow-editor-rest-muted-4 { color:var(--octo-c-muted, #555); font-size:13px; margin:0; }
/* 2x */
.octo-flow-editor-flow-editor-rest-field-2 { min-height:70px; }
/* 2x */
.octo-flow-editor-flow-editor-rest-small { color:color-mix(in srgb, #dc3232 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-flow-editor-flow-editor-rest-hint-2 { margin:4px 0 0; font-size: 0.8rem; color:var(--octo-c-muted, #666); line-height:1.4; }
/* 2x */
.octo-flow-editor-flow-editor-rest-hint-3 { margin:8px 0 0; font-size: 0.8rem; color:var(--octo-c-muted, #666); line-height:1.4; }
/* 2x */
.octo-flow-editor-flow-editor-rest-label-2 { font-size: 0.8rem; }
/* 2x */
.octo-flow-editor-flow-editor-rest-hint-4 { margin:4px 0 0; font-size:11px; color:var(--octo-c-faint, #888); }
/* 2x */
.octo-flow-editor-flow-editor-rest-block-6 { width:120px; }
/* 2x */
.octo-flow-editor-flow-editor-rest-div-6 { flex:1; min-width:120px; }
/* 2x */
.octo-flow-editor-flow-editor-rest-span { background:#4FA5C9; }
/* 2x */
.octo-flow-editor-flow-editor-rest-muted-5 { font-weight:400;color:var(--octo-c-faint, #94a3b8); }
/* 2x */
.octo-flow-editor-flow-editor-rest-hint-5 { font-size:11px; color:var(--octo-c-muted, #6b7280); cursor:pointer; background:none; border:none; text-decoration:underline; padding:0; }

/* --- Octoserv/octoserv/includes/helpers/form-captcha.php --- */
/* 3x */
.octo-helpers-form-captcha-div { margin:8px 0; }

/* --- Octoserv/octoserv/includes/ajax/class-octo-ajax-smtp.php --- */
/* 2x */
.octo-ajax-ajax-smtp-cell { padding:3px 12px 3px 0;color:var(--octo-c-faint, #888); }

/* --- Octoserv/octoserv/templates/einstellungen/ads-performance.php --- */
/* 22x */
.octo-settings-ads-performance-cell { padding: 12px 0 12px 40px; }
/* 17x */
.octo-settings-ads-performance-head { font-size: 0.875rem; font-weight: 500; padding: 12px 0; }
/* 14x */
.octo-settings-ads-performance-card { width: 100%; max-width: 500px; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
/* 6x */
.octo-settings-ads-performance-block { width: 18px; height: 18px; }
/* 5x */
.octo-settings-ads-performance-heading { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
/* 5x */
.octo-settings-ads-performance-info { color:color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 5x */
.octo-settings-ads-performance-head-2 { width: 180px; font-size: 0.875rem; font-weight: 500; padding: 12px 0; }
/* 5x */
.octo-settings-ads-performance-head-3 { padding: 8px; text-align: left; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
/* 4x */
.octo-settings-ads-performance-cell-2 { padding:6px 8px;border-bottom:1px solid var(--octo-c-border, #f3f4f6); }
/* 2x */
.octo-settings-ads-performance-card-2 { margin-top: 12px; padding: 12px; background: var(--octo-c-card, #f9fafb); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
/* 2x */
.octo-settings-ads-performance-span { margin-left: 8px; font-size: 0.8125rem; }
/* 2x */
.octo-settings-ads-performance-muted { color:var(--octo-c-faint, #9ca3af); }
/* 2x */
.octo-settings-ads-performance-card-3 { flex: 1; max-width: 246px; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
/* 2x */
.octo-settings-ads-performance-info-2 { margin: 0 0 8px; font-size: 0.875rem; color:color-mix(in srgb, #0c4a6e var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-ads-performance-success { color:color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-ads-performance-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-ads-performance-cell-3 { padding:12px;text-align:center;color:var(--octo-c-faint, #9ca3af); }

/* --- Octoserv/octoserv/templates/einstellungen/api-keys.php --- */
/* 3x */
.octo-settings-api-keys-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-api-keys-span { color:color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/templates/einstellungen/calendar-sync.php --- */
/* 4x */
.octo-settings-calendar-sync-cell { padding: 12px 0 12px 40px; }
/* 3x */
.octo-settings-calendar-sync-head { font-size: 0.875rem; font-weight: 500; padding: 12px 0; }
/* 2x */
.octo-settings-calendar-sync-heading { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
/* 2x */
.octo-settings-calendar-sync-span { font-size: 0.8125rem; }
/* 2x */
.octo-settings-calendar-sync-card { width: 100%; max-width: 500px; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }

/* --- Octoserv/octoserv/templates/einstellungen/cron.php --- */
/* 21x */
.octo-settings-cron-heading { margin-top: 25px; font-size: 0.95rem; font-weight: 600; color:color-mix(in srgb, var(--octo-c-text, #1f2937) var(--octo-ink, 100%), var(--octo-c-text)); }
/* 6x */
.octo-settings-cron-heading-2 { padding: 20px 20px 0; margin: 0; font-size: 1.25rem; font-weight: 600; }
/* 6x */
.octo-settings-cron-muted { margin-top: 0; font-size: 0.95rem; color: var(--octo-c-muted, #4b5563); }
/* 5x */
.octo-settings-cron-div { margin-top: 30px; border-top: 1px solid var(--octo-c-border, #eee); padding-top: 20px; }
/* 5x */
.octo-settings-cron-heading-3 { margin-top: 0; font-size: 0.95rem; font-weight: 600; color:color-mix(in srgb, var(--octo-c-text, #1f2937) var(--octo-ink, 100%), var(--octo-c-text)); }
/* 5x */
.octo-settings-cron-h4 { margin: 0 0 10px 0; font-size: 14px; }
/* 5x */
.octo-settings-cron-muted-2 { margin-top: 10px; font-size: 0.875rem; color: var(--octo-c-muted, #4b5563); padding-left: 20px; }
/* 4x */
.octo-settings-cron-muted-3 { margin-top: 5px; font-size: 0.875rem; color: var(--octo-c-muted, #4b5563); }
/* 4x */
.octo-settings-cron-pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-family: monospace; font-size: 0.8rem; color: var(--octo-c-text, #374151); }
/* 3x */
.octo-settings-cron-hint { margin-top: 5px; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-settings-cron-code { font-size: 0.8rem; }
/* 2x */
.octo-settings-cron-p { margin-top: 5px; font-size: 0.875rem; color: var(--octo-c-text, #374151); }
/* 2x */
.octo-settings-cron-muted-4 { color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-settings-cron-muted-5 { margin-top: 5px; font-size: 0.875rem; color:var(--octo-c-faint, #9ca3af); }

/* --- Octoserv/octoserv/templates/einstellungen/design.php --- */
/* 3x */
.octo-settings-design-div { border-top: 1px solid var(--octo-c-border, #f3f4f6); padding-top: 20px; margin-top: 20px; }
/* 2x */
.octo-settings-design-h2 { padding: 20px 20px 0; margin: 0; }
/* 2x */
.octo-settings-design-card { width:40px; height:32px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:5px; cursor:pointer; padding:2px; }
/* 2x */
.octo-settings-design-button { padding:4px 10px; font-size: 0.8rem; }

/* --- Octoserv/octoserv/templates/einstellungen/n8n.php --- */
/* 8x */
.octo-settings-n8n-head { width: 200px; font-size: 0.875rem; font-weight: 500; padding: 12px 0; text-align: left; }
/* 8x */
.octo-settings-n8n-cell { padding: 12px 0 12px 40px; }
/* 4x */
.octo-settings-n8n-card { width: 100%; max-width: 500px; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
/* 4x */
.octo-settings-n8n-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-n8n-heading { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
/* 2x */
.octo-settings-n8n-card-2 { flex: 1; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
/* 2x */
.octo-settings-n8n-card-3 { font-size: 0.8rem; padding: 8px 12px; background: var(--octo-c-card, #f3f4f6); border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; cursor: pointer; white-space: nowrap;color:var(--octo-c-text, #111827); }
/* 2x */
.octo-settings-n8n-span { margin-left: 12px; font-size: 0.8125rem; }
/* 2x */
.octo-settings-n8n-success { color:color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/templates/einstellungen/profil.php --- */
/* 3x */
.octo-settings-profile-div { padding: 24px 24px 0; }
/* 3x */
.octo-settings-profile-heading { margin: 0 0 6px; font-size: 0.95rem; }
/* 3x */
.octo-settings-profile-hint { margin: 0 0 20px; color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
/* 2x */
.octo-settings-profile-div-2 { cursor:default; }
/* 2x */
.octo-settings-profile-field { padding:6px 10px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:6px; font-size:0.875rem; }

/* --- Octoserv/octoserv/templates/einstellungen/roles.php --- */
/* 22x */
.octo-settings-roles-hint { font-size: 0.8125rem; color: var(--octo-c-muted, #64748b); }
/* 3x */
.octo-settings-roles-h4 { margin-top: 30px; margin-bottom: 15px; border-top: 1px solid var(--octo-c-border, #ddd); padding-top: 20px; }
/* 3x */
.octo-settings-roles-strong { font-weight: 600; color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); margin-bottom: 2px; }
/* 2x */
.octo-settings-roles-strong-2 { font-weight: 600; color:color-mix(in srgb, #0369a1 var(--octo-ink, 100%), var(--octo-c-text)); margin-bottom: 2px; }
/* 2x */
.octo-settings-roles-strong-3 { font-weight: 600; color:color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); margin-bottom: 2px; }

/* --- Octoserv/octoserv/templates/einstellungen/salestats.php --- */
/* 3x */
.octo-settings-salestats-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.95rem; }
/* 2x */
.octo-settings-salestats-heading { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; }
/* 2x */
.octo-settings-salestats-muted { margin-top: 0; color: var(--octo-c-muted, #6b7280); font-size: 0.95rem; }
/* 2x */
.octo-settings-salestats-hint { all: unset; padding: 8px 16px; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--octo-c-muted, #6b7280); margin-bottom: -2px; }

/* --- Octoserv/octoserv/templates/einstellungen/smtp.php --- */
/* 7x */
.octo-settings-smtp-head { padding: 10px; font-size: 0.8rem; }
/* 5x */
.octo-settings-smtp-cell { padding:8px 10px;font-size:0.8rem; }
/* 2x */
.octo-settings-smtp-field { resize: vertical; }
/* 2x */
.octo-settings-smtp-span { color:color-mix(in srgb, #0a7d32 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-smtp-span-2 { color:color-mix(in srgb, #a00 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-smtp-hint { font-size: 0.8rem;color:var(--octo-c-muted, #666); }
/* 2x */
.octo-settings-smtp-muted { color:var(--octo-c-faint, #999);margin-left:12px; }

/* --- Octoserv/octoserv/templates/einstellungen/system.php --- */
/* 4x */
.octo-settings-system-head { width: 280px; font-size: 0.875rem; font-weight: 500; padding: 12px 0; text-align: left; }
/* 4x */
.octo-settings-system-cell { padding: 12px 0 12px 40px; font-size: 0.875rem; }
/* 3x */
.octo-settings-system-field { margin-top: 2px; flex-shrink: 0; }

/* --- Octoserv/octoserv/templates/einstellungen/systemrollen.php --- */
/* 3x */
.octo-settings-system-roles-field { margin-top:6px; }
/* 2x */
.octo-settings-system-roles-h2 { padding:20px 20px 0;margin:0; }
/* 2x */
.octo-settings-system-roles-cell { text-align:center;padding:30px; }
/* 2x */
.octo-settings-system-roles-heading { margin:0;font-size: 0.95rem;color:color-mix(in srgb, var(--octo-c-text, #111827) var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/templates/einstellungen/telefonie.php --- */
/* 7x */
.octo-settings-telephony-cell { padding: 12px 0 12px 40px; }
/* 6x */
.octo-settings-telephony-heading { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
/* 6x */
.octo-settings-telephony-card { width: 100%; max-width: 500px; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
/* 5x */
.octo-settings-telephony-hint { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
/* 5x */
.octo-settings-telephony-head { font-size: 0.875rem; font-weight: 500; padding: 12px 0; }
/* 5x */
.octo-settings-telephony-head-2 { padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--octo-c-border, #e5e7eb); }
/* 5x */
.octo-settings-telephony-head-3 { padding: 8px 12px; text-align: center; border-bottom: 2px solid var(--octo-c-border, #e5e7eb); }
/* 4x */
.octo-settings-telephony-cell-2 { padding: 8px 12px; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); }
/* 4x */
.octo-settings-telephony-cell-3 { padding: 8px 12px; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); text-align: center; }
/* 4x */
.octo-settings-telephony-card-2 { flex: 1; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-size: 0.8125rem; }
/* 3x */
.octo-settings-telephony-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-telephony-block { margin-top: 2px; }
/* 2x */
.octo-settings-telephony-head-4 { width: 180px; font-size: 0.875rem; font-weight: 500; padding: 12px 0; }
/* 2x */
.octo-settings-telephony-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
/* 2x */
.octo-settings-telephony-tr { background: var(--octo-c-card, #f9fafb); }
/* 2x */
.octo-settings-telephony-cell-4 { padding: 16px; text-align: center; color:var(--octo-c-faint, #9ca3af); }
/* 2x */
.octo-settings-telephony-strong { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; }
/* 2x */
.octo-settings-telephony-hint-2 { margin: 0 0 10px; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-settings-telephony-card-3 { padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-size: 0.8125rem; font-family: monospace; }
/* 2x */
.octo-settings-telephony-card-4 { all: unset; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
/* 2x */
.octo-settings-telephony-field { min-width: 180px; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-size: 0.8125rem; }

/* --- Octoserv/octoserv/templates/einstellungen/users.php --- */
/* 29x */
.octo-settings-users-muted { color: var(--octo-c-muted, #6b7280); }
/* 5x */
.octo-settings-users-card { padding: 8px; border-radius: 4px; background: var(--octo-c-card, #f3f4f6); border-left: 3px solid #6b7280; }
/* 5x */
.octo-settings-users-strong { color: var(--octo-c-text, #374151); }
/* 4x */
.octo-settings-users-head { text-align: center; width: 100px; background: rgba(107,114,128,0.08); border-left: 3px solid #6b7280; }
/* 3x */
.octo-settings-users-warning { color:color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-users-cell { text-align: center; padding: 40px; }
/* 2x */
.octo-settings-users-h2 { padding: 20px 20px 0; margin: 0; }
/* 2x */
.octo-settings-users-strong { margin: 0 0 10px 0; font-size: 13px; font-weight: 600; color: var(--octo-c-text, #374151); }
/* 2x */
.octo-settings-users-span { font-size: 0.6875rem; }
/* 2x */
.octo-settings-users-hint { font-size: 0.8rem;color:var(--octo-c-faint, #9ca3af);margin:0; }
/* 2x */
.octo-settings-users-card-2 { padding: 8px; border-radius: 4px; background: rgba(59, 130, 246, 0.08); border-left: 3px solid #3b82f6; }
/* 2x */
.octo-settings-users-strong-2 { color:color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-users-card-3 { padding: 8px; border-radius: 4px; background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; }
/* 2x */
.octo-settings-users-card-4 { padding: 8px; border-radius: 4px; background: rgba(239, 68, 68, 0.08); border-left: 3px solid #ef4444; }
/* 2x */
.octo-settings-users-card-5 { padding: 8px; border-radius: 4px; background: rgba(139, 92, 246, 0.08); border-left: 3px solid #8b5cf6; }
/* 2x */
.octo-settings-users-card-6 { padding: 8px; border-radius: 4px; background: rgba(236, 72, 153, 0.08); border-left: 3px solid #ec4899; }
/* 2x */
.octo-settings-users-strong-3 { color: color-mix(in srgb, #be185d var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-users-info { color:color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-settings-users-heading { margin-top: 20px; margin-bottom: 10px; border-top: 1px solid var(--octo-c-border, #ddd); padding-top: 20px; font-size: 0.95rem; }

/* --- Octoserv/octoserv/templates/einstellungen/usersync.php --- */
/* 2x */
.octo-settings-usersync-span { font-size:0.8rem; }

/* --- Octoserv/octoserv/templates/einstellungen/tabs/administrator-system.php --- */
/* 2x */
.octo-tabs-administrator-system-hint { font-size:0.875rem; color:var(--octo-c-muted, #666); margin-bottom:20px; }
/* 2x */
.octo-tabs-administrator-system-button { margin-bottom:32px; }

/* --- Octoserv/octoserv/templates/einstellungen/tabs/smtp.php --- */
/* 2x */
.octo-tabs-smtp-span { color: red; }

/* --- Octoserv/octoserv/templates/einstellungen/tabs/users.php --- */
/* 2x */
.octo-tabs-users-p { margin: 5px 0; }

/* --- Octoserv/octoserv/templates/appointments/calendar-config-panel.php --- */
/* 3x */
.octo-appointments-calendar-config-panel-strong { color:color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-appointments-calendar-config-panel-hint { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
/* 3x */
.octo-appointments-calendar-config-panel-box-error { all: unset; background: #dc2626; color:var(--octo-c-on-dark, #ffffff); font-size: 0.6875rem; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
/* 3x */
.octo-appointments-calendar-config-panel-field { padding: 8px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 0.8125rem; }
/* 2x */
.octo-appointments-calendar-config-panel-hint-2 { color:var(--octo-c-muted, #6b7280); font-size:0.8125rem; }
/* 2x */
.octo-appointments-calendar-config-panel-card { background:var(--octo-c-card, #fff); border-radius:12px; width:100%; max-width:450px; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1); overflow:hidden; }
/* 2x */
.octo-appointments-calendar-config-panel-div { padding:1.5rem; border-bottom:1px solid var(--octo-c-border, #e5e7eb); background:var(--octo-c-card, #f9fafb); }
/* 2x */
.octo-appointments-calendar-config-panel-div-2 { padding:1.5rem; }
/* 2x */
.octo-appointments-calendar-config-panel-field-2 { width:16px; height:16px; }
/* 2x */
.octo-appointments-calendar-config-panel-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/templates/appointments/list.php --- */
/* 3x */
.octo-appointments-list-muted { flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--octo-c-faint, #9ca3af); padding:2px; font-size:13px; line-height:1; opacity:0.6; }
/* 2x */
.octo-appointments-list-h4 { margin:0 0 8px; }

/* --- Octoserv/octoserv/templates/contacts/data-view-config-panel.php --- */
/* 3x */
.octo-contacts-data-view-config-panel-div { width: 48%; }
/* 3x */
.octo-contacts-data-view-config-panel-div-2 { width: 31%; }
/* 2x */
.octo-contacts-data-view-config-panel-div-3 { width: 64%; }
/* 2x */
.octo-contacts-data-view-config-panel-div-4 { width: 32%; }
/* 2x */
.octo-contacts-data-view-config-panel-div-5 { width: 23%; }

/* --- Octoserv/octoserv/templates/contacts/list.php --- */
/* 3x */
.octo-contacts-list-div { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--octo-c-border, #ddd); }

/* --- Octoserv/octoserv/templates/contacts/boxes/box-custom_fields.php --- */
/* 9x */
.octo-boxes-box-custom-fields-card { width: 100%; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: var(--octo-dv-value, 0.875rem); }

/* --- Octoserv/octoserv/templates/contacts/boxes/box-tasks.php --- */
/* 2x */
.octo-boxes-box-tasks-h4 { margin:0 0 8px; }

/* --- Octoserv/octoserv/templates/includes/sidebar-footer.php --- */
/* 3x */
.octo-sidebar-footer-div { margin-bottom:14px; }
/* 2x */
.octo-sidebar-footer-field { width:100%;background:var(--octo-c-inverse, #374151);border:1px solid #4b5563;border-radius:6px;padding:9px 12px;color:var(--octo-c-on-dark, #f9fafb);font-size:14px;box-sizing:border-box; }

/* --- Octoserv/octoserv/templates/admin/migration-assistant.php --- */
/* 4x */
.octo-migration-assistant-muted { color: var(--octo-c-muted, #64748b); margin-bottom: 24px; }
/* 2x */
.octo-migration-assistant-muted-2 { color: var(--octo-c-muted, #64748b); }

/* --- Octoserv/octoserv/templates/dashboard/dashboard.php --- */
/* 2x */
.octo-dashboard-div { overflow-x: auto; }
/* 2x */
.octo-dashboard-p { padding: 0.75rem 0; }
/* 2x */
.octo-dashboard-strong { font-size:0.8rem; font-weight:600; color: var(--octo-c-text, #111827); }

/* --- Octoserv/octoserv/templates/funktionen/ads-performance.php --- */
/* 23x */
.octo-features-ads-performance-number { padding: 8px; text-align: right; }
/* 14x */
.octo-features-ads-performance-head-number { text-align: right; padding: 8px; font-weight: 600; color: var(--octo-c-text, #374151); }
/* 11x */
.octo-features-ads-performance-cell-info { padding: 6px 0; color:color-mix(in srgb, #0c4a6e var(--octo-ink, 100%), var(--octo-c-text)); }
/* 10x */
.octo-features-ads-performance-tr { border-bottom:1px solid color-mix(in srgb, #bae6fd var(--octo-tint, 100%), var(--octo-c-border)); }
/* 8x */
.octo-features-ads-performance-head { text-align: left; padding: 8px; font-weight: 600; color: var(--octo-c-text, #374151); }
/* 8x */
.octo-features-ads-performance-span { font-size: 0.8125rem; }
/* 6x */
.octo-features-ads-performance-number-2 { padding: 6px 0; text-align: right; font-weight: 600; }
/* 5x */
.octo-features-ads-performance-span-2 { font-size: 0.875rem; font-weight: 400; }
/* 4x */
.octo-features-ads-performance-card { background: var(--octo-c-card, #fff); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; padding: 20px; text-align: center; }
/* 4x */
.octo-features-ads-performance-hint { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
/* 4x */
.octo-features-ads-performance-hint-2 { font-size: 0.6875rem; color:var(--octo-c-faint, #9ca3af); margin-top: 2px; }
/* 4x */
.octo-features-ads-performance-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
/* 4x */
.octo-features-ads-performance-number-3 { padding: 8px; text-align: right; font-weight: 500; }
/* 4x */
.octo-features-ads-performance-card-2 { background:rgba(255,255,255,0.2); font-size: 0.6875rem; padding:1px 4px; border-radius:3px; margin-right:4px; }
/* 4x */
.octo-features-ads-performance-hint-3 { font-size: 0.6875rem; color: var(--octo-c-muted, #6b7280); margin-top: 2px; }
/* 4x */
.octo-features-ads-performance-table-2 { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
/* 4x */
.octo-features-ads-performance-warning { color:color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8125rem; }
/* 4x */
.octo-features-ads-performance-warning-2 { margin: 4px 0 0; color:color-mix(in srgb, #78350f var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8125rem; line-height: 1.5; }
/* 4x */
.octo-features-ads-performance-success { color:color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8125rem; }
/* 4x */
.octo-features-ads-performance-success-2 { margin: 4px 0 0; color: color-mix(in srgb, #15803d var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8125rem; line-height: 1.5; }
/* 3x */
.octo-features-ads-performance-field { padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 0.8125rem; }
/* 3x */
.octo-features-ads-performance-heading { font-size: 1.75rem; font-weight: 700; color:color-mix(in srgb, var(--octo-c-text, #111827) var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-features-ads-performance-tr-2 { border-bottom: 2px solid var(--octo-c-border, #e5e7eb); }
/* 3x */
.octo-features-ads-performance-tr-3 { border-bottom: 1px solid var(--octo-c-border, #f3f4f6); }
/* 3x */
.octo-features-ads-performance-warning-3 { color:color-mix(in srgb, #b26205 var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 500; }
/* 3x */
.octo-features-ads-performance-number-success { padding: 8px; text-align: right; font-weight: 600; color:color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-features-ads-performance-strong { border-top: 2px solid #111827; font-weight: 700; }
/* 3x */
.octo-features-ads-performance-span-3 { font-size: 0.8rem; font-weight: 400; }
/* 3x */
.octo-features-ads-performance-div { flex: 1; position: relative; }
/* 3x */
.octo-features-ads-performance-hint-4 { margin: 0 0 8px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--octo-c-muted, #6b7280); }
/* 3x */
.octo-features-ads-performance-hint-5 { font-size: 0.6875rem; color: var(--octo-c-muted, #6b7280); text-transform: uppercase; margin-bottom: 4px; }
/* 3x */
.octo-features-ads-performance-box-warning { margin-bottom: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--octo-c-card, #ffffff) 70%, transparent); border-radius: 8px; border-left: 3px solid #f59e0b; }
/* 3x */
.octo-features-ads-performance-card-3 { margin-bottom: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--octo-c-card, #ffffff) 70%, transparent); border-radius: 8px; border-left: 3px solid #22c55e; }
/* 2x */
.octo-features-ads-performance-box-warning-2 { background:color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color:color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
/* 2x */
.octo-features-ads-performance-strong-2 { margin: 0 0 16px; font-size: 0.95rem; font-weight: 600; }
/* 2x */
.octo-features-ads-performance-div-2 { position: relative; height: 250px; }
/* 2x */
.octo-features-ads-performance-div-3 { margin-bottom: 24px; }
/* 2x */
.octo-features-ads-performance-strong-3 { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
/* 2x */
.octo-features-ads-performance-div-4 { padding: 16px 20px; overflow-x: auto; }
/* 2x */
.octo-features-ads-performance-cell { padding: 8px 8px 8px 24px; font-weight: 500; }
/* 2x */
.octo-features-ads-performance-success-3 { color:color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 500; }
/* 2x */
.octo-features-ads-performance-number-warning { padding: 8px; text-align: right; font-weight: 600; color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-features-ads-performance-number-success-2 { padding: 8px; text-align: right; color:color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-features-ads-performance-div-5 { width: 130px; text-align: right; font-size: 0.8125rem; color: var(--octo-c-text, #374151); font-weight: 500; }
/* 2x */
.octo-features-ads-performance-div-6 { width: 90px; }
/* 2x */
.octo-features-ads-performance-hint-6 { margin: 16px 0 8px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-features-ads-performance-h4 { margin: 0 0 12px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 60%, transparent); }
/* 2x */
.octo-features-ads-performance-field-2 { width:100%; padding:8px 10px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:6px; font-size:0.875rem; box-sizing:border-box; }

/* --- Octoserv/octoserv/templates/funktionen/custom-fields.php --- */
/* 2x */
.octo-features-custom-fields-field { width: 100%; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 0.875rem; }

/* --- Octoserv/octoserv/templates/funktionen/leadgen.php --- */
/* 2x */
.octo-features-leadgen-hint { margin: 0 0 12px; font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-features-leadgen-card { background:color-mix(in srgb, #bfdbfe var(--octo-tint, 100%), var(--octo-c-card));padding:1px 4px;border-radius:3px; }

/* --- Octoserv/octoserv/templates/companies/detail.php --- */
/* 6x */
.octo-companies-detail-muted { color:var(--octo-c-faint, #9ca3af); font-style:italic; }
/* 6x */
.octo-companies-detail-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-companies-detail-field { width:100%; padding:6px 8px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:4px; font-size:13px; }
/* 3x */
.octo-companies-detail-field-2 { width:100%; padding:6px 8px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:4px; font-size:13px; box-sizing:border-box; }
/* 2x */
.octo-companies-detail-div { font-size: 0.875rem; }
/* 2x */
.octo-companies-detail-block { color: color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-companies-detail-muted-2 { color:var(--octo-c-faint, #9ca3af); font-style: italic; }
/* 2x */
.octo-companies-detail-div-2 { grid-column:1/-1; }
/* 2x */
.octo-companies-detail-strong { font-weight:600;font-size:13px; }

/* --- Octoserv/octoserv/templates/invoice/contact-account.php --- */
/* 2x */
.octo-invoice-contact-account-cell { color:var(--octo-c-muted, #888); }
/* 2x */
.octo-invoice-contact-account-cell-2 { color:var(--octo-c-muted, #888);text-align:center;padding:16px; }

/* --- Octoserv/octoserv/templates/invoice/detail.php --- */
/* 3x */
.octo-invoice-detail-span { color:color-mix(in srgb, #c0392b var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-invoice-detail-muted { color:var(--octo-c-muted, #888); }
/* 2x */
.octo-invoice-detail-small { font-weight:400; }
/* 2x */
.octo-invoice-detail-number { text-align:right;font-size: 0.8rem;color:var(--octo-c-muted, #888); }

/* --- Octoserv/octoserv/templates/invoice/editor.php --- */
/* 2x */
.octo-invoice-editor-field { width:60px; }

/* --- Octoserv/octoserv/templates/invoice/list.php --- */
/* 2x */
.octo-invoice-list-field { font-size:11px;font-weight:600;border:none;background:transparent;cursor:pointer;padding:0 2px;color:var(--octo-c-muted, #6b7280);text-transform:uppercase;letter-spacing:.04em; }
/* 2x */
.octo-invoice-list-col { width:10%; }
/* 2x */
.octo-invoice-list-col-2 { width:13%; }

/* --- Octoserv/octoserv/assets/js/admin.js --- */
/* 2x */
.octo-admin-p { margin: 5px 0; }

/* --- Octoserv/octoserv/assets/js/campaigns.js --- */
/* 3x */
.octo-campaigns-heading { margin:0; font-size: 0.95rem; font-weight:600; color:var(--octo-c-text, #111); }
/* 3x */
.octo-campaigns-muted { background:none; border:none; color:var(--octo-c-muted, #666); cursor:pointer; font-size:18px; line-height:1; }
/* 3x */
.octo-campaigns-card { padding:10px 16px; background:var(--octo-c-card, #fff); color:var(--octo-c-text, #333); border:1px solid var(--octo-c-border, #d1d5db); border-radius:6px; cursor:pointer; font-size:13px; }
/* 2x */
.octo-campaigns-card-2 { background:var(--octo-c-card, #fff); color:var(--octo-c-text, #111); width:480px; max-width:92%; border-radius:10px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,0.35); }
/* 2x */
.octo-campaigns-div { padding:18px; }
/* 2x */
.octo-campaigns-field { width:100%; padding:10px 12px; border:1px solid var(--octo-c-border, #d1d5db); border-radius:6px; font-size:14px; box-sizing:border-box; }
/* 2x */
.octo-campaigns-muted-2 { text-align:center; color:var(--octo-c-faint, #999); }

/* --- Octoserv/octoserv/assets/js/companies.js --- */
/* 10x */
.octo-companies-field { width:100%; padding:8px 10px; border:1px solid var(--octo-c-border, #e5e7eb); border-radius:6px; font-size:14px; box-sizing:border-box; }
/* 9x */
.octo-companies-field-2 { width: 100%; padding: 8px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
/* 2x */
.octo-companies-cell { font-size: 0.875rem; }
/* 2x */
.octo-companies-cell-2 { color: color-mix(in srgb, #d32f2f var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.875rem; }
/* 2x */
.octo-companies-hint { color:var(--octo-c-muted, #6b7280); font-size: 0.8rem; }
/* 2x */
.octo-companies-field-3 { width: 100%; padding: 8px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; font-size: 14px; box-sizing: border-box; background: var(--octo-c-card, #fff); transition: border-color 0.2s; }

/* --- Octoserv/octoserv/assets/js/contact-edit.js --- */
/* 2x */
.octo-contact-edit-hint { font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }

/* --- Octoserv/octoserv/assets/js/contacts.js --- */
/* 2x */
.octo-contacts-hint { margin: 0; color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
/* 2x */
.octo-contacts-div { margin-top:6px;font-size: 0.875rem; }

/* --- Octoserv/octoserv/assets/js/octo-custom-fields.js --- */
/* 3x */
.octo-custom-fields-head { text-align: left; padding: 8px; font-weight: 600; color: var(--octo-c-text, #374151); }

/* --- Octoserv/octoserv/assets/js/octo-leadgen.js --- */
/* 3x */
.octo-leadgen-span { color:color-mix(in srgb, #7c3aed var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-leadgen-head { text-align:left; padding:8px; border-bottom:2px solid var(--octo-c-border, #e5e7eb); color:var(--octo-c-text, #374151); }
/* 2x */
.octo-leadgen-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/assets/js/octo-systemrollen.js --- */
/* 2x */
.octo-system-roles-cell { text-align:center;padding:30px; }

/* --- Octoserv/octoserv/assets/js/reports.js --- */
/* 5x */
.octo-reports-div { flex-direction: column; align-items: stretch; }
/* 4x */
.octo-reports-cell { color:color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 4x */
.octo-reports-div-2 { position: relative; height: 300px; }
/* 4x */
.octo-reports-hint { text-align: center; margin: 0.5rem 0 0 0; font-size: 0.875rem; color: var(--octo-c-muted); }
/* 3x */
.octo-reports-card { background: var(--octo-c-card); padding: 1.5rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
/* 2x */
.octo-reports-div-3 { color:red; padding:1rem; }
/* 2x */
.octo-reports-label { margin-bottom: 0.25rem; }
/* 2x */
.octo-reports-hint-2 { font-size: 0.875rem; color: var(--octo-c-muted); margin: 0.25rem 0 0 1.5rem; }
/* 2x */
.octo-reports-heading { margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--octo-c-text); }
/* 2x */
.octo-reports-heading-2 { margin: 0 0 1.5rem 0; font-size: 1.25rem; color: var(--octo-c-text); font-weight: 700; border-bottom: 2px solid var(--octo-c-border); padding-bottom: 0.5rem; }
/* 2x */
.octo-reports-heading-3 { margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--octo-c-text); font-weight: 600; }
/* 2x */
.octo-reports-card-2 { background: var(--octo-c-card); padding: 1.5rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }

/* --- Octoserv/octoserv/assets/js/roles.js --- */
/* 2x */
.octo-roles-p { color: red; }

/* --- Octoserv/octoserv/assets/js/system.js --- */
/* 4x */
.octo-system-span { color:color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-system-span-2 { color: color-mix(in srgb, #3b82f6 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-system-success { color:color-mix(in srgb, #0c875e var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/assets/js/users.js --- */
/* 4x */
.octo-users-error { color:color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-users-cell { text-align: center; padding: 40px; }
/* 2x */
.octo-users-p { color: red; }
/* 2x */
.octo-users-field { margin-right: 10px; flex-shrink: 0; }
/* 2x */
.octo-users-muted { color: var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-users-span { color:color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 2x */
.octo-users-success { color:color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/octoserv/assets/flow-editor/index.js --- */
/* 3x */
.octo-flow-editor-index-div { flex-wrap:wrap; gap:6px; border-top:1px solid var(--octo-c-border, #e2e8f0); padding-top:10px; margin-top:6px; }
/* 3x */
.octo-flow-editor-index-hint { width:100%; font-weight:600; font-size: 0.8rem; color:var(--octo-c-muted, #475569); margin-bottom:2px; }
/* 2x */
.octo-flow-editor-index-div-2 { flex:1; min-width:120px; }

/* --- Octoserv/octoserv/src/flow-editor/components/StepSettings.js --- */
/* 3x */
.octo-flow-editor-stepsettings-div { flex-wrap:wrap; gap:6px; border-top:1px solid var(--octo-c-border, #e2e8f0); padding-top:10px; margin-top:6px; }
/* 3x */
.octo-flow-editor-stepsettings-hint { width:100%; font-weight:600; font-size: 0.8rem; color:var(--octo-c-muted, #475569); margin-bottom:2px; }
/* 2x */
.octo-flow-editor-stepsettings-div-2 { flex:1; min-width:120px; }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/admin/class-of-admin-dashboard.php --- */
/* 2x */
.octo-finance-of-admin-dashboard-span { font-size: 0.8rem; }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/views/octo-finanzen-auswertungen.php --- */
/* 2x */
.octo-finance-finance-reports-label { font-size:0.875rem;color:var(--octo-c-muted, #6b7280); }
/* 2x */
.octo-finance-finance-reports-block { flex-shrink:0; }
/* 2x */
.octo-finance-finance-reports-label-2 { font-size:0.8125rem;margin-right:4px; }
/* 2x */
.octo-finance-finance-reports-canvas { max-height:260px; }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/views/octo-finanzen-bwa.php --- */
/* 2x */
.octo-finance-finance-bwa-span { margin-left:4px; }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/views/octo-finanzen-dashboard.php --- */
/* 2x */
.octo-finance-finance-dashboard-span { font-size:0.8125rem; }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/views/octo-finanzen-kontoauszug.php --- */
/* 4x */
.octo-finance-finance-bank-statement-muted { font-weight:400;color:var(--octo-c-faint, #888); }

/* --- Octoserv/Auslieferung/octo-finance/includes/presentation/views/octo-finanzen-manuelle-buchungen.php --- */
/* 5x */
.octo-finance-finance-manual-bookings-span { font-size:0.8125rem; }

/* --- Octoserv/Auslieferung/octo-livechat/includes/class-form-builder.php --- */
/* 5x */
.octo-livechat-form-builder-field { width:100%;box-sizing:border-box; }

/* --- Octoserv/Auslieferung/octo-lp-setup/assets/js/paypal-smart-buttons.js --- */
/* 2x */
.octo-lp-setup-paypal-smart-buttons-p { color:color-mix(in srgb, #800000 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/Auslieferung/octo-lp-setup/templates/einstellungen.php --- */
/* 9x */
.octo-lp-setup-settings-head { padding:8px;text-align:left;border-bottom:1px solid var(--octo-c-border, #e5e7eb); }
/* 4x */
.octo-lp-setup-settings-cell { padding:8px;border-bottom:1px solid color-mix(in srgb, #f1f5f9 var(--octo-tint, 100%), var(--octo-c-border)); }
/* 3x */
.octo-lp-setup-settings-info { margin:16px 0 8px; font-size: 0.95rem; color:color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-lp-setup-settings-card { width:100%;padding:8px;border:1px solid var(--octo-c-border, #e5e7eb);border-radius:4px; }
/* 3x */
.octo-lp-setup-settings-cell-2 { padding:8px;border-bottom:1px solid color-mix(in srgb, #f1f5f9 var(--octo-tint, 100%), var(--octo-c-border));font-size: 0.8rem; }
/* 2x */
.octo-lp-setup-settings-heading { margin:0 0 14px;color:color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));font-size: 0.95rem; }

/* --- Octoserv/Auslieferung/octo-pages/templates/settings.php --- */
/* 3x */
.octo-pages-settings-heading { margin:0 0 4px; font-size: 0.95rem; color:color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/Auslieferung/octo-proposal/includes/flow/class-flow-step-create-offer.php --- */
/* 2x */
.octo-proposal-flow-step-create-offer-hr { margin: 0 0 18px; border: 0; border-top:1px solid var(--octo-c-border, #e5e7eb); }

/* --- Octoserv/Auslieferung/octo-proposal/assets/js/octo-proposal-editor.js --- */
/* 2x */
.octo-proposal-proposal-editor-muted { color:var(--octo-c-faint, #999);font-size:13px; }

/* --- Octoserv/Auslieferung/octo-ragchat/assets/js/admin.js --- */
/* 3x */
.octo-ragchat-admin-span { color:color-mix(in srgb, #008923 var(--octo-ink, 100%), var(--octo-c-text)); }
/* 3x */
.octo-ragchat-admin-span-2 { color:color-mix(in srgb, #d63638 var(--octo-ink, 100%), var(--octo-c-text)); }

/* --- Octoserv/Auslieferung/octo-ranking/includes/class-admin.php --- */
/* 2x */
.octo-ranking-admin-table { max-width: 500px; }

/* Hinweise in Flow-Masken: Der Flow-Editor zieht small mit -8px nach oben
   (gedacht fuer Felder mit Aussenabstand). In .octo-step-field haben die
   Felder keinen - der Hinweis rutschte ins Eingabefeld. */
.octo-flow-settings-content .octo-step-field small {
	margin-top: 6px;
	margin-bottom: 0;
}
/**
 * Schaltflaechen (gemeinsame Definition)
 *
 * Eine Quelle fuer das ganze System. Bis hierher brachte jede neuere Seite ihre
 * eigene Klasse mit (.octo-lc-btn im LiveChat, .octo-ks-btn beim
 * Kampagnen-Starter, .octo-cd-btn in der Kontakt-Detailansicht) - dieselbe
 * Definition in mehreren Dateien. Neue Seiten nutzen .octo-ui-btn, bestehende
 * werden nach und nach umgestellt.
 *
 * Regeln aus dem Design-System "Octo-Eleganz":
 * - so breit wie die Beschriftung, niemals width: 100%
 * - EINE orange Hauptaktion pro Ansicht, alles Begleitende im Glas-Design
 * - Aktionsleisten stehen rechts, die Hauptaktion ganz aussen
 * Siehe developer/design-system-dev.html
 *
 * @package OctoServ
 * @since 2.24.0
 */

.octo-ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	min-height: 36px;
	padding: 7px 14px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--octo-c-card, #ffffff);
	color: var(--octo-c-text, #111827);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.octo-ui-btn:focus-visible {
	outline: 2px solid #e09000;
	outline-offset: 2px;
}

.octo-ui-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Die eine Hauptaktion.
   Schrift ueber --octo-c-accent-text, nicht ueber --octo-c-on-dark: Auf dem
   Orange traegt weiss nur 2,57:1, dunkel dagegen 7,22:1. Die Rolle haelt
   beide Schemata zusammen und ist die eine Stelle, an der diese
   Entscheidung steht. */
.octo-ui-btn--primary {
	background: var(--octo-c-accent, #e09000);
	border-color: var(--octo-c-accent, #e09000);
	color: var(--octo-c-accent-text, #1a1200);
}

.octo-ui-btn--primary:hover {
	background: #c87f00;
	border-color: #c87f00;
	color: var(--octo-c-accent-text, #1a1200);
}

/* Alles Begleitende: getoentes Blau statt Weiss. Weiss auf weisser Flaeche
   verschwindet - man sieht die Schaltflaeche erst, wenn man sie sucht. */
.octo-ui-btn--quiet {
	background: rgba(0, 107, 149, 0.08);
	border-color: rgba(0, 107, 149, 0.25);
	color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.octo-ui-btn--quiet:hover {
	background: rgba(0, 107, 149, 0.15);
	border-color: rgba(0, 107, 149, 0.4);
	color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Loeschen und Entfernen: dasselbe Glas in Warnrot */
.octo-ui-btn--danger {
	background: rgba(128, 0, 0, 0.06);
	border-color: rgba(128, 0, 0, 0.3);
	color: color-mix(in srgb, #800000 var(--octo-ink, 100%), var(--octo-c-text));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.octo-ui-btn--danger:hover {
	background: rgba(128, 0, 0, 0.12);
	border-color: color-mix(in srgb, #800000 var(--octo-ink, 100%), var(--octo-c-text));
	color: color-mix(in srgb, #660000 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-ui-btn--sm {
	min-height: 30px;
	padding: 4px 10px;
	font-size: 0.8rem;
}

/* Auf schmalen Geraeten mehr Klickflaeche - aber weiterhin nicht volle Breite */
@media (max-width: 640px) {
	.octo-ui-btn {
		min-height: 44px;
	}
}

/* ============================================================
   Altbestand: .octo-btn auf die neuen Masse bringen

   .octo-btn ist in zehn Stylesheets definiert - activities, appointments,
   campaigns, contact-detail, dashboard (zweimal), frontend, import, leadgen.
   Welche Definition greift, entschied bisher die Ladereihenfolge der Seite,
   und die aelteste Fassung ist mit 0.7rem Innenabstand und 1rem Schrift
   deutlich klobiger als alles Neuere.

   Diese Datei wird zuletzt geladen und setzt deshalb die Masse fuer alle.
   Farben bleiben unangetastet - die kommen aus den Modifier-Klassen der
   jeweiligen Seite und aus Inline-Styles, die ohnehin staerker sind.

   ⚠️ Kontext-Regeln wie .octo-actions .octo-btn (Dashboard-Kacheln, bewusst
   volle Breite) haben hoehere Spezifitaet und bleiben unberuehrt.
   ============================================================ */
.octo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* "Eine Schaltflaeche ist so breit wie ihre Beschriftung - nicht so breit
	   wie ihr Container." (Design-System)
	   Diese Zeile fehlte, und genau eine Zeile weiter oben in der Kaskade
	   stand in frontend.css ein width:100% auf derselben Basisklasse. Alles
	   andere dort - Hoehe, Innenabstand, Schriftgrad - wurde von hier
	   ueberschrieben, die Breite nicht: Wo nichts steht, gibt es nichts zu
	   ueberschreiben. Deshalb spannten sich Schaltflaechen ueber die halbe
	   Seite, obwohl die Vorgabe seit jeher etwas anderes sagt. */
	width: auto;
	min-height: 36px;
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Volle Breite bleibt moeglich - aber nur, wo sie ausdruecklich gewollt ist:
   in schmalen Dialogen, Seitenspalten und Editorbereichen. Zwei Klassen
   statt einer, damit diese Regel das width:auto von oben schlaegt, ohne auf
   die Ladereihenfolge angewiesen zu sein.
   Kontext-Regeln wie .octo-modal-actions .octo-btn oder
   .octo-proposal-filter-actions .octo-btn tragen bereits zwei Klassen und
   behalten ihre volle Breite unveraendert. */
.octo-btn.octo-btn-block,
.octo-btn.octo-btn-full-width {
	width: 100%;
}

.octo-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	/* Dashicons bringen line-height fuer ihre 20px-Box mit. Auf 16px
	   verkleinert sass die Glyphe dadurch tiefer als der Text daneben -
	   Symbol und Schrift standen sichtbar nicht auf einer Linie. Die
	   Glyphe wird deshalb in ihrer eigenen Box zentriert. */
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 640px) {
	.octo-btn {
		min-height: 44px;
	}
}

/* ============================================
   Umschalter fuer die Anzeigedichte

   Steht seit 2.25.0 in der Seitenleiste und damit auf jeder Seite - deshalb
   liegt er hier in der global geladenen Datei und nicht mehr in
   contact-detail.css. Die dunkle Variante fuer die Seitenleiste steht in
   dashboard.css unter .octo-sidebar-density.
   ============================================ */
.octo-density-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 7px;
	background: rgba(0, 107, 149, 0.06);
	border: 1px solid rgba(0, 107, 149, 0.18);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ⚠️ Der Umschalter sitzt im Fuss der Seitenleiste, und die ist in BEIDEN
   Schemata dunkel. --octo-c-muted ist die Rolle fuer helle Flaechen und traegt
   dort im Hellmodus 3.04 - gemessen auf octo.dcskg.de. Deshalb die
   Seitenleisten-Rolle, nicht die allgemeine. */
.octo-density-option {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 26px;
	padding: 3px 9px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--octo-c-sidebar-text, #d1d5db);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.octo-density-option:hover {
	color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text));
}

.octo-density-option.is-active {
	background: var(--octo-c-card, #ffffff);
	color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
	box-shadow: 0 1px 2px rgba(0, 52, 80, 0.12);
}

.octo-density-option:focus-visible {
	outline: 2px solid #006B95;
	outline-offset: 1px;
}

.octo-density-option svg {
	flex-shrink: 0;
}


/* Zwei Umschalter nebeneinander: Dichte und Farbschema */
.octo-view-switches {
	display: flex;
	flex-direction: column;
	gap: 6px;
}


.octo-sidebar-density .octo-density-help:hover {
	opacity: 1;
}

/* Die beiden Schaltergruppen in der Seitenleiste untereinander */
.octo-sidebar-density {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* ============================================================
   Hilfsklassen fuer einzelne Layout-Angaben

   Das Design-System erlaubt Inline-Styles nur fuer Werte, die zur
   Laufzeit berechnet werden - etwa die Breite eines Fortschrittsbalkens
   in Prozent. Alles andere gehoert in eine Klasse. Fuer einmalige
   Layout-Hilfsmittel (Abstand, Ausrichtung, Flex-Anteil) ist die
   vorgesehene Form eine Utility-Klasse.

   Diese Datei loest 464 Inline-Styles ab, die genau eine Layout-Angabe
   trugen. Ein Wert steht hier nur, wenn er mindestens fuenfmal vorkam -
   fuer Einzelfaelle waere eine eigene Klasse Ballast.

   ⚠️ KEIN !important.
   Ein Inline-Style schlaegt jede Regel; wer ihn durch eine Klasse mit
   !important ersetzt, tauscht nur ein Ueberschreiben gegen das naechste
   und macht die Kaskade genauso undurchsichtig wie vorher. Diese Datei
   wird stattdessen ZULETZT geladen (Prioritaet 9999, zusammen mit
   octo-buttons.css). Damit gewinnt sie gegen gleich spezifische Regeln
   der Seiten-Stylesheets, verliert aber gegen Kontext-Regeln mit zwei
   Klassen und gegen zur Laufzeit gesetzte Werte - und genau so soll es
   sein.

   ⚠️ NICHT hier: display:none.
   Das ist ein Zustand, kein Stil. 187 Stellen setzen style.display
   direkt, 694 weitere benutzen die Ein-/Ausblendfunktionen von jQuery.
   Sichtbarkeit gehoert deshalb in eine Zustandsklasse, die dasselbe
   Skript umschaltet - das ist Arbeit je Modul, kein Suchen und Ersetzen.
   ============================================================ */

/* Abstand aussen */
.octo-u-m-0        { margin: 0; }
.octo-u-mt-0       { margin-top: 0; }
.octo-u-mt-3       { margin-top: 3px; }
.octo-u-mt-8       { margin-top: 8px; }
.octo-u-mt-12      { margin-top: 12px; }
.octo-u-mt-15      { margin-top: 15px; }
.octo-u-mt-20      { margin-top: 20px; }
.octo-u-mb-6       { margin-bottom: 6px; }
.octo-u-mb-8       { margin-bottom: 8px; }
.octo-u-mb-12      { margin-bottom: 12px; }
.octo-u-mb-20      { margin-bottom: 20px; }
.octo-u-mb-30      { margin-bottom: 30px; }
.octo-u-mb-1rem    { margin-bottom: 1rem; }
.octo-u-mb-1-5rem  { margin-bottom: 1.5rem; }
.octo-u-mr-8       { margin-right: 8px; }
.octo-u-mr-12      { margin-right: 12px; }

/* Abstand innen */
.octo-u-p-8        { padding: 8px; }
.octo-u-p-10       { padding: 10px; }
.octo-u-p-20       { padding: 20px; }

/* Aufteilung */
.octo-u-flex-1     { flex: 1; }
.octo-u-flex-2     { flex: 2; }
.octo-u-w-full     { width: 100%; }

/* Ausrichtung und Schrift */
.octo-u-text-center { text-align: center; }
.octo-u-text-right  { text-align: right; }
.octo-u-fw-600      { font-weight: 600; }
.octo-u-fw-700      { font-weight: 700; }

/* Bedienung */
.octo-u-pointer    { cursor: pointer; }
/**
 * Farbschema (hell / dunkel)
 *
 * Vierzehn Farbrollen statt hundert Einzelwerte. Das Schema haengt am
 * <html>-Tag (octo_view_html_attributes), gilt also fuer jede Seite und steht
 * schon beim Rendern - nichts springt nach dem Laden nach.
 *
 * ⚠️ REGELN FUER NEUE STELLEN
 * 1. Farben aus den Rollen nehmen, keine eigenen Hex-Werte.
 * 2. Keine Inline-Styles mit Farben. Sie schlagen jedes Stylesheet und bleiben
 *    im Dunkeln als helle Flecken stehen.
 * 3. Zwei Textfarben: --octo-c-text fuer Gelesenes, --octo-c-muted fuer
 *    Begleitendes. Zwischentoene lesen sich als dritte Ebene, die es nicht gibt.
 *
 * Bewusst NICHT dunkel: Login, oeffentliche Formulare, Landingpages und der
 * E-Mail-Editor. Die sehen Kunden, nicht die Mitarbeiter.
 *
 * @package OctoServ
 * @since 2.26.0
 */

/* ============================================================
   Die Rollen

   ⚠️ Bewusst auf :root UND auf [data-octo-theme]. Seiten ohne Attribut
   (Login, oeffentliche Formulare) sollen die hellen Werte trotzdem bekommen -
   sonst stuende in jeder umgestellten Regel ein var() ohne Wert. Zusaetzlich
   traegt jede Verwendung in den Seiten-Stylesheets ihren Rueckfallwert.
   ============================================================ */
:root,
[data-octo-theme] {
	--octo-tint: 100%;
	--octo-ink: 100%;
	--octo-c-page: #f3f4f6;
	--octo-c-card: #ffffff;
	--octo-c-card-head: #f7f9fb;
	--octo-c-border: #e5e7eb;
	--octo-c-border-soft: #f1f3f5;
	--octo-c-text: #111827;
	/* Gemessen auf der Seitenflaeche (#f3f4f6): #6b7280 traegt 4.39 und lag
	   damit knapp unter der Schwelle - betroffen war jede Seitenbeschreibung
	   und jeder Formularhinweis. #626973 traegt 5.04 auf der Seite und 5.54
	   auf der Karte. */
	--octo-c-muted: #626973;
	/* Gemessen: #c4c8cd auf Weiss ergab 1.68 - das war keine gedaempfte
	   Schrift mehr, sondern eine unsichtbare. Auf der Werbeauswertung stand
	   "CTR: 2.95%" in dieser Farbe. #787f86 traegt 4.06 und bleibt trotzdem
	   sichtbar heller als --octo-c-muted (4.83). */
	--octo-c-faint: #666d74;
	--octo-c-accent: #e09000;
	/* Dunkle Schrift auf dem Orange - in BEIDEN Schemata.
	   Die Zahlen: weiss auf #e09000 ergibt 2,57:1, dunkel auf demselben
	   Orange 7,22:1. Die Schwelle fuer Text liegt bei 4,5.
	   Am 03.09.2026 war dunkle Schrift schon einmal gesetzt und wurde
	   verworfen, weil der Block im hellen Schema schwer wirkte. Am
	   04.09.2026 wurde sie nach einem Vergleich aller vier Varianten
	   nebeneinander wieder eingefuehrt: Das Markenorange #e09000 bleibt
	   damit unveraendert - was bei der Alternative (Orange abdunkeln bis
	   weisse Schrift traegt, #a46900) nicht der Fall gewesen waere.
	   Im Dunkeln war es ohnehin schon dunkle Schrift; beide Schemata
	   verhalten sich jetzt gleich. */
	--octo-c-accent-text: #1a1200;
	--octo-c-link: #006B95;
	--octo-c-input: #ffffff;
	--octo-c-input-border: #e5e7eb;
	--octo-c-quiet-bg: rgba(0, 107, 149, 0.08);
	--octo-c-quiet-border: rgba(0, 107, 149, 0.25);
	--octo-c-quiet-text: #006B95;
	--octo-c-sidebar: #1f2937;
	--octo-c-sidebar-hover: #374151;
	--octo-c-sidebar-active: #2d3a4a;
	--octo-c-sidebar-text: #d1d5db;
	--octo-c-shadow: rgba(0, 0, 0, 0.05);
	--octo-c-row-hover: #f9fafb;
	/* Schrift auf farbiger oder dunkler Flaeche - bleibt in BEIDEN Schemata
	   hell. Wichtig: weisse Schrift ist keine Kartenflaeche. */
	--octo-c-on-dark: #ffffff;
	/* Flaechen, die ABSICHTLICH dunkel sind - Untermenue der Seitenleiste,
	   Codebloecke, dunkle Schaltflaechen. Im Dunkelmodus duerfen sie nicht
	   schwarz bleiben, sonst verschwinden sie im Seitenhintergrund. */
	--octo-c-inverse: #111827;
	--octo-c-sidebar-sub: #111827;
	/* Punktraster der Editor-Flaechen (Flow-Editor, Workflow-Editor,
	   Formular-Vorschau). Eine eigene Rolle, weil das Raster weder Rand
	   noch Schrift ist: es soll nur eine Ahnung von Ordnung geben und im
	   Dunkeln hinter die Karten zuruecktreten. */
	--octo-c-dots: #cbd5e1;
}

[data-octo-theme="dark"] {
	/* Kein reines Schwarz: ein sehr dunkles Blaugrau, abgeleitet vom
	   Markenblau #003450. Reines Schwarz wirkt hart und laesst Raender
	   verschwinden. */
	/* Zwei Schalter fuer Farben, die ihren Ton behalten sollen:

	   --octo-tint  regelt, wie stark eine Pastellflaeche durchschlaegt.
	                Hell bleibt sie unveraendert, dunkel wird sie zu einer
	                dezenten Toenung des Kartengrunds - der Farbcharakter
	                bleibt, das Leuchten verschwindet.
	   --octo-ink   regelt dasselbe fuer kraeftige Schriftfarben, die auf
	                dem dunklen Grund sonst absaufen wuerden.

	   So bleibt jede Regel an ihrem Platz und traegt trotzdem beide Modi. */
	--octo-tint: 15%;
	--octo-ink: 35%;
	--octo-c-page: #0f1821;
	--octo-c-card: #18232f;
	--octo-c-card-head: #1e2b39;
	--octo-c-border: #2a3a4a;
	--octo-c-border-soft: #212e3c;
	--octo-c-text: #e6edf3;
	--octo-c-muted: #a9b5c1;
	/* Gemessen: #6b7a8a auf der Karte ergab 3.62. #8593a3 traegt 5.07 auf der
	   Karte, 5.71 auf der Seite und 4.59 auf dem Kartenkopf. */
	--octo-c-faint: #a9b5c1;
	/* Orange bleibt Orange, aber entsaettigt - volle Saettigung flimmert auf
	   dunklem Grund. Die Schrift darauf wird dunkel statt weiss. */
	--octo-c-accent: #e6a01f;
	--octo-c-accent-text: #1a1200;
	--octo-c-link: #7cc4e2;
	--octo-c-input: #131f2a;
	--octo-c-input-border: #31445a;
	--octo-c-quiet-bg: rgba(79, 165, 201, 0.14);
	--octo-c-quiet-border: rgba(79, 165, 201, 0.35);
	--octo-c-quiet-text: #7cc4e2;
	--octo-c-sidebar: #0b131b;
	--octo-c-sidebar-hover: #17222e;
	--octo-c-sidebar-active: #1e2b39;
	--octo-c-sidebar-text: #9aa7b4;
	--octo-c-shadow: rgba(0, 0, 0, 0.40);
	--octo-c-row-hover: #1c2836;
	--octo-c-on-dark: #ffffff;
	--octo-c-inverse: #2a3a4a;
	--octo-c-sidebar-sub: #070d13;
	/* Nur eine Helligkeitsstufe ueber dem Editor-Grund (#1e2b39) - hell
	   genug fuer das Raster, dunkel genug, dass die Step-Karten davor
	   stehen statt darin unterzugehen. */
	--octo-c-dots: #3a4a59;
}

/* ============================================================
   Dunkel: Rahmen und Flaechen

   Im Hellen trennt eine Linie, im Dunklen eine Helligkeitsstufe:
   Karte heller als Seite, Kopfzeile heller als Karte.
   ============================================================ */
[data-octo-theme="dark"] body.octo-dashboard,
[data-octo-theme="dark"] .octo-main,
[data-octo-theme="dark"] .octo-content {
	background: var(--octo-c-page);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-sidebar {
	background: var(--octo-c-sidebar);
	border-right: 1px solid var(--octo-c-border);
}

/* ⚠️ Der Sidebar-Kopf bleibt in der eingestellten Markenfarbe, auch im Dunkeln.
   Zwei Gruende: Octo_Core::output_sidebar_header_bg() schreibt sie als
   Inline-Style mit !important - dagegen kommt kein Stylesheet an. Und das ist
   hier richtig so: Logos sind meist fuer hellen Grund gezeichnet und wuerden
   auf dunklem Kopf verschwinden. Wer einen dunklen Kopf will, stellt die Farbe
   unter Einstellungen -> Design ein und hinterlegt ein helles Logo. */
[data-octo-theme="dark"] .octo-sidebar-header {
	border-bottom-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-nav-link {
	color: var(--octo-c-sidebar-text);
}

[data-octo-theme="dark"] .octo-nav-link:hover {
	background: var(--octo-c-sidebar-hover);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-nav-item.active .octo-nav-link {
	background: var(--octo-c-sidebar-active);
	color: var(--octo-c-text);
}

/* ============================================================
   Dunkel: Karten, Boxen, Kopfzeilen
   ============================================================ */
[data-octo-theme="dark"] .octo-detail-box,
[data-octo-theme="dark"] .octo-card,
[data-octo-theme="dark"] .octo-contacts-list,
[data-octo-theme="dark"] .octo-box,
[data-octo-theme="dark"] .octo-panel {
	background: var(--octo-c-card);
	border-color: var(--octo-c-border);
	box-shadow: 0 1px 3px var(--octo-c-shadow);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-box-header,
[data-octo-theme="dark"] .octo-card-header {
	background: var(--octo-c-card-head);
	border-bottom-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-box-header h3,
[data-octo-theme="dark"] .octo-card-header h2,
[data-octo-theme="dark"] .octo-card-header h3,
[data-octo-theme="dark"] .octo-contact-detail .octo-detail-title,
[data-octo-theme="dark"] .octo-section-title,
[data-octo-theme="dark"] h1,
[data-octo-theme="dark"] h2,
[data-octo-theme="dark"] h3,
[data-octo-theme="dark"] h4 {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-field-value,
[data-octo-theme="dark"] .octo-note-content,
[data-octo-theme="dark"] .octo-note-compact-title,
[data-octo-theme="dark"] .octo-task-title,
[data-octo-theme="dark"] .octo-file-name {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-field-label,
[data-octo-theme="dark"] .octo-note-meta,
[data-octo-theme="dark"] .octo-note-compact-meta,
[data-octo-theme="dark"] .octo-task-meta,
[data-octo-theme="dark"] .octo-file-meta,
[data-octo-theme="dark"] .octo-help-text,
[data-octo-theme="dark"] .octo-detail-meta,
[data-octo-theme="dark"] .box-campaigns .octo-control-title,
[data-octo-theme="dark"] .octo-back-link {
	color: var(--octo-c-muted);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-empty-state,
[data-octo-theme="dark"] .octo-contact-detail .octo-field-value:empty::after,
[data-octo-theme="dark"] .octo-detail-meta-empty {
	color: var(--octo-c-faint);
}

[data-octo-theme="dark"] .octo-detail-avatar {
	background: var(--octo-c-quiet-bg);
	color: var(--octo-c-quiet-text);
}

/* ============================================================
   Dunkel: Tabellen
   ============================================================ */
[data-octo-theme="dark"] .octo-table,
[data-octo-theme="dark"] .octo-table tbody tr {
	background: var(--octo-c-card);
	color: var(--octo-c-text);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-table thead th {
	background: var(--octo-c-card-head);
	color: var(--octo-c-muted);
	border-bottom-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-table td,
[data-octo-theme="dark"] .octo-table th {
	border-color: var(--octo-c-border-soft);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-table tbody tr:hover {
	background: var(--octo-c-row-hover);
}

[data-octo-theme="dark"] .octo-contacts-toolbar {
	background: var(--octo-c-page);
}

/* ============================================================
   Dunkel: Eingaben und Auswahlfelder
   ============================================================ */
/* Ueber die Typen aufzuzaehlen greift zu kurz: ein <input> ohne
   type-Attribut ist ein Textfeld, wird von input[type="text"] aber nicht
   getroffen. Deshalb andersherum - alles ausser den Feldern, die keine
   eigene Flaeche haben. */
[data-octo-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="image"]),
[data-octo-theme="dark"] textarea,
[data-octo-theme="dark"] select,
[data-octo-theme="dark"] .octo-input {
	background: var(--octo-c-input);
	border-color: var(--octo-c-input-border);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] input::placeholder,
[data-octo-theme="dark"] textarea::placeholder {
	color: var(--octo-c-faint);
}

[data-octo-theme="dark"] select option {
	background: var(--octo-c-input);
	color: var(--octo-c-text);
}

/* ============================================================
   Dunkel: Schaltflaechen
   ============================================================ */
[data-octo-theme="dark"] .octo-ui-btn--primary,
[data-octo-theme="dark"] .octo-cd-btn--primary,
[data-octo-theme="dark"] .octo-btn-primary {
	background: var(--octo-c-accent);
	border-color: var(--octo-c-accent);
	color: var(--octo-c-accent-text, #1a1200);
}

[data-octo-theme="dark"] .octo-ui-btn--quiet,
[data-octo-theme="dark"] .octo-cd-btn--quiet {
	background: var(--octo-c-quiet-bg);
	border-color: var(--octo-c-quiet-border);
	color: var(--octo-c-quiet-text);
}

[data-octo-theme="dark"] .octo-ui-btn--quiet:hover,
[data-octo-theme="dark"] .octo-cd-btn--quiet:hover {
	background: rgba(79, 165, 201, 0.22);
	border-color: rgba(79, 165, 201, 0.5);
	color: #a9dcf0;
}

/* Loeschen im Dunkelschema: die helle Variante mischt #800000 ueber
   --octo-ink auf 35% in die Textfarbe - auf dunkler Karte ergab das ein
   fast unsichtbares Dunkelrot (gemessen 18.09.2026 auf der Dokumentenseite).
   Helles Rot auf getoenter Flaeche, gleiche Logik wie bei quiet. */
[data-octo-theme="dark"] .octo-ui-btn--danger {
	background: rgba(220, 90, 90, 0.16);
	border-color: rgba(240, 130, 130, 0.45);
	color: #f2b8b8;
}

[data-octo-theme="dark"] .octo-ui-btn--danger:hover {
	background: rgba(220, 90, 90, 0.28);
	border-color: rgba(240, 130, 130, 0.7);
	color: #fbd5d5;
}

[data-octo-theme="dark"] .octo-btn-secondary,
[data-octo-theme="dark"] .octo-btn-icon {
	background: var(--octo-c-quiet-bg);
	border-color: var(--octo-c-quiet-border);
	color: var(--octo-c-quiet-text);
}

/* Ein Link bekommt die Linkfarbe - aber nur, solange er wie ein Link
   aussieht. Traegt er eine eigene Flaeche (Schaltflaeche, Reiter), gilt
   die Schrift, die zu dieser Flaeche gehoert. */
[data-octo-theme="dark"] .octo-empty-fields-toggle,
[data-octo-theme="dark"] a:not([class*="btn"]):not([class*="button"]):not([class*="-tab"]):not([class*="chip"]):not([class*="nav"]):not([class*="sidebar"]) {
	color: var(--octo-c-link);
}

/* Die Navigation ist aus Links gebaut, aber sie liest sich nicht als
   Linkliste - sie ist die Beschriftung der Seitenleiste. Ihre Farbe kommt
   deshalb aus der Seitenleistenrolle, nicht aus der Linkfarbe. Der
   :not()-Ausschluss oben reicht dafuer nicht: eine Regel kann spaeter noch
   dazukommen, und die Aufzaehlung gewinnt an Spezifitaet. Deshalb hier
   nochmal ausdruecklich. */
[data-octo-theme="dark"] .octo-sidebar .octo-nav-link,
[data-octo-theme="dark"] .octo-sidebar .octo-nav-submenu-link {
	color: var(--octo-c-sidebar-text);
}

[data-octo-theme="dark"] .octo-sidebar .octo-nav-link:hover,
[data-octo-theme="dark"] .octo-sidebar .octo-nav-submenu-link:hover,
[data-octo-theme="dark"] .octo-sidebar .octo-nav-item.active .octo-nav-link {
	color: var(--octo-c-text);
}

/* Die Symbole der Boxkopfzeilen bleiben orange - der Akzent traegt die Marke */
[data-octo-theme="dark"] .octo-contact-detail .octo-box-header .dashicons {
	color: var(--octo-c-accent);
}

[data-octo-theme="dark"] .octo-contact-detail .octo-box-action .dashicons {
	color: var(--octo-c-faint);
}

/* ============================================================
   Dunkel: Dialoge
   ============================================================ */
[data-octo-theme="dark"] .octo-modal-content,
[data-octo-theme="dark"] .octo-modal-body,
[data-octo-theme="dark"] .octo-modal-header,
[data-octo-theme="dark"] .octo-modal-footer {
	background: var(--octo-c-card);
	color: var(--octo-c-text);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-modal-header h3,
[data-octo-theme="dark"] .octo-modal-body label {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-modal .octo-modal-overlay {
	background: rgba(0, 0, 0, 0.65);
}


/* ============================================================
   Dunkel: Bausteine aus anderen Plugins

   Diese Klassen gehoeren nicht dem Core (octo-ranking bringt sein eigenes
   Stylesheet mit). Bis die Plugins die Farbrollen selbst nutzen, bekommen sie
   ihr dunkles Kleid hier - octo-theme.css laedt nach ihnen.
   ============================================================ */
[data-octo-theme="dark"] .octo-ranking-label {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-ranking-updated,
[data-octo-theme="dark"] .octo-ranking-hint,
[data-octo-theme="dark"] .octo-ranking-detail-label {
	color: var(--octo-c-muted);
}

[data-octo-theme="dark"] .octo-ranking-detail-value,
[data-octo-theme="dark"] .octo-ranking-detail-score {
	color: var(--octo-c-text);
}

/* Der Punktekreis traegt dunkle Schrift auf gesaettigter Flaeche */
[data-octo-theme="dark"] .octo-ranking-score-circle {
	color: #1a1200;
}

[data-octo-theme="dark"] .octo-ranking-score-circle.blue,
[data-octo-theme="dark"] .octo-ranking-score-circle.purple {
	color: #e6edf3;
}

/* ============================================================
   Dunkel: kleine Symbolschaltflaechen in Tabellen

   Hellgruen/hellrot gefuellt mit dunkler Schrift - auf dunklem Grund ein
   Leuchtfleck. Im Dunkeln dieselbe Bedeutung als Glas.
   ============================================================ */
[data-octo-theme="dark"] .octo-btn-edit {
	background: rgba(74, 168, 120, 0.16);
	border-color: rgba(74, 168, 120, 0.4);
	color: #6fca9b;
}

[data-octo-theme="dark"] .octo-btn-edit:hover {
	background: rgba(74, 168, 120, 0.28);
	color: #8ad9b2;
}

[data-octo-theme="dark"] .octo-btn-delete {
	background: rgba(220, 90, 90, 0.14);
	border-color: rgba(220, 90, 90, 0.4);
	color: #e08a8a;
}

[data-octo-theme="dark"] .octo-btn-delete:hover {
	background: rgba(220, 90, 90, 0.26);
	color: #f0a5a5;
}

/* ============================================================
   Dunkel: Seitenleisten-Kacheln und Statuszeile
   ============================================================ */
[data-octo-theme="dark"] .octo-sidebar-tile-label {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-tel-connection-text {
	color: var(--octo-c-muted);
}

/* ============================================================
   Dunkel: Hinweise ohne Inhalt
   ============================================================ */
[data-octo-theme="dark"] .octo-empty-state,
[data-octo-theme="dark"] .octo-no-data,
[data-octo-theme="dark"] .octo-placeholder {
	color: var(--octo-c-muted);
}


/* ============================================================
   Dunkel: Schnellauswahl-Chips

   Ihre Statusfarbe kommt als Inline-Style und ist fuer hellen Grund gewaehlt -
   ein dunkles Blau verschwindet im Dunkeln. Dagegen hilft kein Farbwert, denn
   der Inline-Style gewinnt. brightness() hebt genau diese Farbe an, ohne den
   Farbton zu verlieren: dunkle Toene werden lesbar, helle laufen nicht aus.
   ============================================================ */
/* Die Chips nutzen dieselbe Darstellung wie die Status-Chips der Tabelle -
   sie zeigen ja dasselbe. Der Rand traegt die Farbe kraeftiger, damit ein
   ausgewaehlter Filter erkennbar bleibt. */
.octo-qf-chip {
	cursor: pointer;
}

.octo-qf-chip.active {
	border-color: var(--octo-status, #6b7280);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--octo-status, #6b7280) 35%, transparent);
	font-weight: 700;
}

[data-octo-theme="dark"] .octo-quick-filter-bar {
	background: transparent;
}


/* ============================================================
   Statusfarben: Daten getrennt von Darstellung

   Die konfigurierte Farbe eines Status kommt als --octo-status ins Markup -
   ein reiner Datenwert. WIE daraus eine Flaeche wird, steht hier und faellt je
   Farbschema anders aus: hell eine zarte Pastellflaeche, dunkel eine getoente
   Flaeche mit heller Schrift.

   Frueher baute contacts.js ein fertiges rgba() und schrieb es als
   background-color ins Markup. Im Dunkeln standen dort helle Pastellflecken,
   und kein Stylesheet kam dagegen an.
   ============================================================ */
/* ⚠️ Die Statusfarbe wird in den Einstellungen festgelegt und traegt Bedeutung -
   sie muss in BEIDEN Schemata gleich aussehen. Deshalb wird sie ueber Weiss
   gemischt, nicht ueber den Untergrund: Ein Chip sieht hell wie dunkel
   identisch aus, und die Farbe bleibt erkennbar. Eine Mischung mit
   "transparent" wuerde im Dunkeln zu einem matschigen Ton fuehren.

   ⚠️ DAS REZEPT GILT FUER JEDEN CHIP, DESSEN FARBE EINE AUSSAGE TRAEGT
   (2.30.18). Ein Chip ueber --octo-tint auf den Kartengrund zu mischen sieht
   hell richtig aus und ergibt im Dunkeln Grau: 15 % Pastellton auf dunklem
   Blaugrau, dazu eine Schrift, die --octo-ink zur hellen Textfarbe hin
   aufhellt - dunkles Gruen plus helles Grau ist Grau. So gebaut waren 32 Chips
   in zehn Modulen. Sie tragen jetzt alle dieselben drei Zeilen:

     background-color: color-mix(in srgb, <Grundfarbe> 25%, #ffffff);
     border: 1px solid color-mix(in srgb, <Grundfarbe> 45%, #ffffff);
     color: #111827;

   Als Grundfarbe die GESAETTIGTE Farbe der Aussage nehmen (#22c55e, #ef4444,
   #f59e0b, #3b82f6 …), nicht den Pastellton - der wird hier erst erzeugt.

   --octo-tint bleibt richtig fuer FLAECHEN: Hinweiskarten, Kennzahlkacheln,
   getoente Panels. Die duerfen im Dunkeln zuruecktreten, ein Chip nicht. */
.octo-status-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 500;
	background-color: color-mix(in srgb, var(--octo-status, #e5e7eb) 25%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--octo-status, #e5e7eb) 45%, #ffffff);
	color: #111827;
}

/* ⚠️ Die allgemeine Regel fuer Auswahlfelder im Dunkelmodus ist spezifischer
   als eine blosse Klasse ([data-octo-theme="dunkel"] select = 0,1,1 gegen
   .octo-status-chip = 0,1,0). Ohne diese Zeilen gewinnt sie, und das Feld
   verliert seine Statusfarbe. */
select.octo-status-chip,
[data-octo-theme] select.octo-status-chip,
[data-octo-theme="dark"] select.octo-status-chip {
	font-size: inherit;
	background-color: color-mix(in srgb, var(--octo-status, #e5e7eb) 25%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--octo-status, #e5e7eb) 45%, #ffffff);
	color: #111827;
}

/* Ohne color-mix traegt der Rand die Farbe und die Flaeche bleibt neutral */
@supports not (background-color: color-mix(in srgb, red 25%, white)) {
	.octo-status-chip {
		background-color: #1a1200;
		border-color: var(--octo-status, #e5e7eb);
	}
}


/* ============================================================
   Dunkel: die feststehende Aktionsspalte

   Sie ist sticky und braucht deshalb eine DECKENDE Flaeche - sonst schiebt
   sich der Tabelleninhalt beim Scrollen sichtbar darunter. Im Hellen ist das
   Weiss, im Dunkeln muss es die Kartenfarbe sein.
   ============================================================ */
[data-octo-theme="dark"] .octo-table .octo-actions,
[data-octo-theme="dark"] .octo-table thead th.octo-actions {
	background: var(--octo-c-card-head);
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.35);
}

[data-octo-theme="dark"] .octo-table tbody tr td.octo-actions {
	background: var(--octo-c-card);
	border-right-color: var(--octo-c-border);
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.35);
}

[data-octo-theme="dark"] .octo-table tbody tr:hover td.octo-actions {
	background: var(--octo-c-row-hover);
}

/* Die Toolbar klebt ebenfalls oben und braucht eine deckende Flaeche */
[data-octo-theme="dark"] .octo-contacts-toolbar {
	background: var(--octo-c-page);
}


/* ============================================================
   Dunkel: Dashboard

   Die Schnellaktionen setzen ihre Farben mit !important - dagegen hilft nur
   dasselbe Mittel. Es sind Navigationskacheln, keine Aktionen: im Dunkeln
   dieselbe ruhige Glasflaeche wie ueberall.
   ============================================================ */
[data-octo-theme="dark"] .octo-actions .octo-btn-secondary {
	background: var(--octo-c-quiet-bg) !important;
	border-color: var(--octo-c-quiet-border) !important;
	color: var(--octo-c-quiet-text) !important;
}

[data-octo-theme="dark"] .octo-actions .octo-btn-secondary:hover {
	background: rgba(79, 165, 201, 0.22) !important;
	color: #a9dcf0 !important;
}

[data-octo-theme="dark"] .octo-actions .octo-btn-primary {
	background: var(--octo-c-accent) !important;
	border-color: var(--octo-c-accent) !important;
	color: var(--octo-c-accent-text, #1a1200) !important;
}

/* Die Kacheln der Team-Uebersicht und ihre Diagramme */
[data-octo-theme="dark"] .octo-team-widget,
[data-octo-theme="dark"] .octo-widget,
[data-octo-theme="dark"] .octo-stat-card,
[data-octo-theme="dark"] .octo-dashboard-card {
	background: var(--octo-c-card);
	border-color: var(--octo-c-border);
	color: var(--octo-c-text);
}

/* Diagramme zeichnen auf eine eigene Flaeche - die muss mitgehen */
[data-octo-theme="dark"] canvas {
	background: transparent;
}

/* Statistik- und Statuszeilen: Beschriftung gedaempft, Zahl kraeftig */
[data-octo-theme="dark"] .octo-stat-row,
[data-octo-theme="dark"] .octo-status-row {
	border-bottom-color: var(--octo-c-border-soft);
}

[data-octo-theme="dark"] .octo-stat-label,
[data-octo-theme="dark"] .octo-status-label {
	color: var(--octo-c-muted);
}

[data-octo-theme="dark"] .octo-stat-value,
[data-octo-theme="dark"] .octo-status-value {
	color: var(--octo-c-text);
}


/* ============================================================
   Dunkel: Terminkalender

   Die Tageszellen brauchen eine deckende Flaeche, und die Termin-Chips tragen
   ihre Farbe wie die Status-Chips - hell wie dunkel gleich, damit ein Termin
   auf einen Blick zuzuordnen bleibt.
   ============================================================ */
[data-octo-theme="dark"] .octo-cal-day,
[data-octo-theme="dark"] .octo-calendar-day,
[data-octo-theme="dark"] .octo-cal-cell {
	background: var(--octo-c-card);
	border-color: var(--octo-c-border);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-cal-day.is-other-month,
[data-octo-theme="dark"] .octo-calendar-day.other-month {
	background: var(--octo-c-page);
	color: var(--octo-c-faint);
}

[data-octo-theme="dark"] .octo-cal-weekday,
[data-octo-theme="dark"] .octo-cal-kw {
	background: var(--octo-c-card-head);
	color: var(--octo-c-muted);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-appointments-section {
	background: var(--octo-c-card);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-appointments-header {
	background: var(--octo-c-card-head);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-appointments-section.open .octo-appointments-header {
	background: color-mix(in srgb, var(--octo-c-accent) 12%, var(--octo-c-card-head));
}


/* ============================================================
   ⚠️ SICHERHEITSNETZ fuer verbliebene Inline-Styles

   Im Plugin stehen noch rund 4700 Inline-Styles mit festen Farben. Jeder von
   ihnen schlaegt jedes Stylesheet - im Dunkelmodus bleibt daraus eine weisse
   Flaeche, die blendet. Bis eine Seite aufgeraeumt ist, faengt dieses Netz die
   haeufigsten Faelle ab.

   Attributselektoren treffen den Inline-Style direkt; !important ist hier
   ausnahmsweise richtig, weil nur so gegen einen Inline-Style anzukommen ist.

   DAS IST KEINE LOESUNG, SONDERN EIN PFLASTER. Wer eine Seite anfasst, nimmt
   ihre Inline-Farben heraus und laesst sie auf die Rollen zeigen - dann greift
   das Netz dort gar nicht mehr. Es deckt auch nur die Schreibweisen ab, die im
   Bestand vorkommen; exotische Varianten bleiben hell.
   ============================================================ */
[data-octo-theme="dark"] [style*="background:#fff"],
[data-octo-theme="dark"] [style*="background: #fff"],
[data-octo-theme="dark"] [style*="background:#FFF"],
[data-octo-theme="dark"] [style*="background: #FFF"],
[data-octo-theme="dark"] [style*="background:white"],
[data-octo-theme="dark"] [style*="background: white"],
[data-octo-theme="dark"] [style*="background-color:#fff"],
[data-octo-theme="dark"] [style*="background-color: #fff"] {
	background-color: var(--octo-c-card) !important;
}

[data-octo-theme="dark"] [style*="background:#f9fafb"],
[data-octo-theme="dark"] [style*="background: #f9fafb"],
[data-octo-theme="dark"] [style*="background:#f8fafc"],
[data-octo-theme="dark"] [style*="background: #f8fafc"],
[data-octo-theme="dark"] [style*="background:#f3f4f6"],
[data-octo-theme="dark"] [style*="background: #f3f4f6"],
[data-octo-theme="dark"] [style*="background:#f1f5f9"],
[data-octo-theme="dark"] [style*="background: #f1f5f9"],
[data-octo-theme="dark"] [style*="background:#fafbfc"],
[data-octo-theme="dark"] [style*="background: #fafbfc"] {
	background-color: var(--octo-c-card-head) !important;
}

/* Dunkler Text, der auf dunklem Grund stehen bliebe */
[data-octo-theme="dark"] [style*="color:#111827"],
[data-octo-theme="dark"] [style*="color: #111827"],
[data-octo-theme="dark"] [style*="color:#1f2937"],
[data-octo-theme="dark"] [style*="color: #1f2937"],
[data-octo-theme="dark"] [style*="color:#374151"],
[data-octo-theme="dark"] [style*="color: #374151"],
[data-octo-theme="dark"] [style*="color:#003450"],
[data-octo-theme="dark"] [style*="color: #003450"],
[data-octo-theme="dark"] [style*="color:#334155"],
[data-octo-theme="dark"] [style*="color: #334155"] {
	color: var(--octo-c-text) !important;
}

[data-octo-theme="dark"] [style*="color:#6b7280"],
[data-octo-theme="dark"] [style*="color: #6b7280"],
[data-octo-theme="dark"] [style*="color:#64748b"],
[data-octo-theme="dark"] [style*="color: #64748b"],
[data-octo-theme="dark"] [style*="color:#9ca3af"],
[data-octo-theme="dark"] [style*="color: #9ca3af"],
[data-octo-theme="dark"] [style*="color:#666"],
[data-octo-theme="dark"] [style*="color: #666"],
[data-octo-theme="dark"] [style*="color:#999"],
[data-octo-theme="dark"] [style*="color: #999"] {
	color: var(--octo-c-muted) !important;
}

/* ⚠️ Hier stand einmal eine "Ausnahme" mit background-color: revert-layer.
   Das war falsch: revert-layer faellt bei einem <button> auf die Vorgabe des
   Browsers zurueck - buttonface, ein flaches Grau. Die Status-Chips verloren
   dadurch ihre Farbe.

   Eine Ausnahme ist auch gar nicht noetig: Das Netz oben trifft ausschliesslich
   Inline-Styles mit festen Hex-Werten. Die Chips tragen inline nur noch den
   Datenwert --octo-status, ihre Flaeche kommt aus einer Klassenregel. */

/* ============================================================
   Dunkel: Tabellen ohne eigene Klasse

   Mehrere Seiten (Auswertung, Berichte) bauen einfache <table>-Gerueste ohne
   .octo-table. Sie erben sonst gar nichts.
   ============================================================ */
[data-octo-theme="dark"] .octo-content table {
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-content table th {
	background: var(--octo-c-card-head);
	color: var(--octo-c-muted);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-content table td {
	border-color: var(--octo-c-border-soft);
	color: var(--octo-c-text);
}


/* ============================================================
   Dunkel: Landingpages

   ⚠️ Dieses Plugin liefert sein CSS als gebaute Datei (build/index.css aus
   src/editor.css). Gebaute Dateien werden nicht von Hand geaendert - beim
   naechsten Bau waere die Aenderung weg. Deshalb bekommt die Seite ihr dunkles
   Kleid hier; octo-theme.css laedt nach dem Plugin.

   Wenn octo-landingpage das naechste Mal gebaut wird: die Farbwerte in
   src/editor.css auf die Rollen umstellen und diesen Block entfernen.
   ============================================================ */
[data-octo-theme="dark"] .octo-lp-table,
[data-octo-theme="dark"] .octo-lp-card,
[data-octo-theme="dark"] .octo-lp-panel {
	background: var(--octo-c-card);
	color: var(--octo-c-text);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-lp-table thead,
[data-octo-theme="dark"] .octo-lp-table th {
	background: var(--octo-c-card-head);
	color: var(--octo-c-muted);
	border-color: var(--octo-c-border);
}

[data-octo-theme="dark"] .octo-lp-table td {
	border-color: var(--octo-c-border-soft);
	color: var(--octo-c-text);
}

[data-octo-theme="dark"] .octo-lp-table tbody tr:hover {
	background: var(--octo-c-row-hover);
}


/* ============================================================
   Dunkel: helle Verlaeufe und Transparenzen

   Verlaeufe tragen ihre Farbstopps in Klammern - eine Ersetzung, die hinter
   'background:' sucht, uebersieht sie. Wo noch helle rgba-Werte stehen,
   deckt diese Regel sie ab.
   ============================================================ */
[data-octo-theme="dark"] .octo-documents .octo-box,
[data-octo-theme="dark"] .octo-doc-dropzone,
[data-octo-theme="dark"] .octo-docs-grid .octo-box {
	background: var(--octo-c-card);
	border-color: var(--octo-c-border);
}

/* Kartenkoepfe, die ihre Flaeche als heller Verlauf bekommen */
[data-octo-theme="dark"] .octo-documents .octo-box h2,
[data-octo-theme="dark"] .octo-documents .octo-box h3 {
	color: var(--octo-c-text);
}


/* ============================================================
   Dunkel: Regler

   Ein Schieberegler hat keine gemeinsame Standardgestaltung - die Bahn
   kommt je nach Browser aus einem eigenen Pseudoelement. Ohne diese
   Regeln bleibt sie weiss und leuchtet aus der dunklen Flaeche heraus.
   ============================================================ */
[data-octo-theme="dark"] input[type="range"] {
	background: transparent;
	accent-color: var(--octo-c-accent);
}

[data-octo-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
	background: var(--octo-c-input);
	border: 1px solid var(--octo-c-input-border);
	border-radius: 999px;
}

[data-octo-theme="dark"] input[type="range"]::-moz-range-track {
	background: var(--octo-c-input);
	border: 1px solid var(--octo-c-input-border);
	border-radius: 999px;
}

[data-octo-theme="dark"] input[type="range"]::-webkit-slider-thumb {
	background: var(--octo-c-accent);
}

[data-octo-theme="dark"] input[type="range"]::-moz-range-thumb {
	background: var(--octo-c-accent);
	border: none;
}

/* ============================================================
   Hauptschaltflaeche: dunkle Schrift auf dem Orange

   Weisse Schrift auf #e09000 kommt auf 2,6:1 - die wichtigste Schaltflaeche
   der Oberflaeche war damit die am schlechtesten lesbare. Dunkle Schrift
   erreicht 7,2:1. Das Dunkelschema loest es seit jeher so; die helle Seite
   war nie nachgezogen.

   Warum die Regel hier steht und nicht in den neun Stylesheets, die
   .octo-btn-primary einfaerben: activities.css setzt Flaeche UND Schrift mit
   !important, und zwar ueber --octo-c-on-dark - die Rolle fuer Schrift auf
   einer Flaeche, die in BEIDEN Schemata dunkel ist. Ein oranger Grund ist das
   nicht. Neun Dateien anzufassen waere der groessere Eingriff; octo-theme.css
   laedt zuletzt und ist die dokumentierte Stelle fuer genau solche Korrekturen.
   ============================================================ */
.octo-btn-primary,
.octo-cd-btn--primary {
	background: var(--octo-c-accent) !important;
	border-color: var(--octo-c-accent) !important;
	color: var(--octo-c-accent-text, #1a1200) !important;
}

/* Die blau gemeinten Hauptschaltflaechen behalten Blau und weisse Schrift:
   Schnellaktionen, Dialoginhalte, E-Mail-Liste, E-Mail-Box der Kontaktansicht.
   Sie sind spezifischer als die Regel darueber und gewinnen damit; die
   Dunkel-Regeln weiter oben sind wiederum spezifischer als diese hier. */
.octo-actions .octo-btn-primary,
.octo-modal-content .octo-btn-primary,
#octo-email-list .octo-btn-primary,
.octo-detail-box[data-box="emails"] .octo-box-actions .octo-btn-primary {
	background: var(--sh-blue-700, #006899) !important;
	border-color: var(--sh-blue-700, #006899) !important;
	color: var(--octo-c-on-dark) !important;
}

/* ============================================================
   Beschriftung der drei Kacheln im Seitenleistenfuss

   Die Kacheln sind in beiden Schemata gleich gefaerbt, also darf ihre
   Beschriftung keiner Rolle folgen:

     weiss auf #e09000 / #e6a01f   2.57 / 2.23      dunkel  7.22 / 8.33
     weiss auf #4FA5C9             2.78             dunkel  6.69
     weiss auf #006B95             5.94             dunkel  3.13  <- weiss bleibt

   ⚠️ Die Regel steht HIER und nicht in dashboard.css. Dort stand sie zuerst
   und verlor im Dunkelmodus gegen die allgemeinen Schriftregeln dieses
   Stylesheets: gleiche Spezifitaet, und octo-theme.css wird zuletzt geladen.
   ============================================================ */
/* Auch die Kachel selbst, nicht nur ihre Kinder: Sonst traegt der Rahmen
   weiter weiss, waehrend Beschriftung und Symbol dunkel sind - und alles,
   was spaeter dazukommt, erbt die falsche Farbe. */
.octo-sidebar-tile--new,
.octo-sidebar-tile--mobile,
[data-octo-theme="dark"] .octo-sidebar-tile--new,
[data-octo-theme="dark"] .octo-sidebar-tile--mobile,
.octo-sidebar-tile--new .octo-sidebar-tile-label,
.octo-sidebar-tile--new .octo-sidebar-tile-icon,
.octo-sidebar-tile--mobile .octo-sidebar-tile-label,
.octo-sidebar-tile--mobile .octo-sidebar-tile-icon,
[data-octo-theme="dark"] .octo-sidebar-tile--new .octo-sidebar-tile-label,
[data-octo-theme="dark"] .octo-sidebar-tile--new .octo-sidebar-tile-icon,
[data-octo-theme="dark"] .octo-sidebar-tile--mobile .octo-sidebar-tile-label,
[data-octo-theme="dark"] .octo-sidebar-tile--mobile .octo-sidebar-tile-icon {
	color: #1a1200;
}

/* Die Datenkachel bleibt weiss - #006B95 ist dunkel genug. Beschriftung und
   Symbol aber gemeinsam: Sonst steht --octo-c-text neben --octo-c-on-dark,
   zwei fast gleiche Weisstoene in derselben Kachel. */
.octo-sidebar-tile--data .octo-sidebar-tile-label,
.octo-sidebar-tile--data .octo-sidebar-tile-icon,
[data-octo-theme="dark"] .octo-sidebar-tile--data .octo-sidebar-tile-label,
[data-octo-theme="dark"] .octo-sidebar-tile--data .octo-sidebar-tile-icon {
	color: var(--octo-c-on-dark, #ffffff);
}

/* ============================================================
   Ein Symbol in einer Schaltflaeche traegt die Farbe ihrer Beschriftung

   Auf der Kampagnenseite stand in EINER Schaltflaeche beides nebeneinander:
   das Pluszeichen weiss, die Beschriftung dunkel - auf demselben Orange.
   Die Beschriftung war umgestellt worden, das Symbol nicht, weil es seine
   eigene Regel hat:

     campaigns.css   .octo-campaigns-btn-add-category .dashicons -> var(--octo-c-on-dark)

   Auf derselben Seite betraf das 7 von 19 Schaltflaechen mit Symbol. Es
   einzeln nachzuziehen hiesse, dieselbe Entscheidung an dreissig Stellen zu
   wiederholen - und beim naechsten Modul wieder zu vergessen. Ein Symbol
   gehoert zur Beschriftung; es erbt.

   ⚠️ Das ist ein STANDARD, kein Uebersteuern. Am 05.09.2026 stand hier
   ":root button .dashicons" mit Spezifitaet (0,2,1) - damit schlug die Regel
   79 Symbolregeln der Module. Wo eine davon richtig war, machte sie sie
   kaputt: Die Aktionsschaltflaechen der Angebotsliste sind <button> ohne
   eigene Schriftfarbe, das Symbol erbte deshalb Schwarz und war auf dem
   dunklen Glas nicht mehr zu sehen.

   Jetzt (0,1,1): Die Regel greift nur, wo die Komponente selbst nichts sagt -
   und das ist genau der Fall, der den Fehler erzeugt. Wo eine Komponente eine
   eigene Symbolfarbe setzt, gewinnt sie; ist die falsch, gehoert sie dort
   korrigiert und nicht hier ueberstimmt.
   ============================================================ */
button .dashicons,
button svg,
.octo-btn .dashicons,
.octo-btn svg,
.octo-ui-btn .dashicons,
.octo-ui-btn svg,
a.octo-btn .dashicons,
a.octo-ui-btn .dashicons {
	color: inherit;
}

/* ============================================================
   KEIN FARBUEBERGANG AUF SYMBOLEN (seit 2.62.1)
   WordPress setzt in dashicons.css `transition: color .1s ease-in`. Schaltet der
   Nutzer das Farbschema in der Seitenleiste live um, bleibt ein Symbol mit
   `inherit` auf einer Farbe aus color-mix() in Chrome auf dem alten Wert stehen,
   bis die Seite neu geladen wird: gemessen 28.09.2026 an „Verbindung testen"
   (ChatGPT Ads) und den ruhigen Schaltflaechen in SEO, auch nach 2,5 s noch.
   Ohne Uebergang stimmen Symbol und Beschriftung sofort in beiden Schemata.
   Gleiche Spezifitaet wie in dashicons.css; gewinnt, weil diese Datei zuletzt laedt.
   ============================================================ */
.dashicons,
.dashicons-before::before {
	transition: none;
}
/*
 * Native additions. Only rules that today stood as inline styles in templates or JavaScript
 * strings (same values, now as classes, design-system-dev.html "CSS-Klassen statt
 * Inline-Styles") and the few states that today's jQuery set with .css(). Loaded after
 * octo-theme.css; every colour comes from a role or is a fixed pair on a fixed surface.
 */

/* list: row number of the company list (companies.js:226) */
.osn-cell-rownum { color: var(--octo-c-faint, #9ca3af); font-size: 0.8rem; }
.osn-nowrap { white-space: nowrap; }

/* company list: "Kunde" badge (companies.js:216-218); accent surface with accent text */
.osn-customer-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; }
.osn-customer-none { color: var(--octo-c-faint, #9ca3af); font-size: 0.8rem; }

/* company list: button "Nur Kunden" (companies.js:24-31, 55-62) */
.osn-filter-customers { background: var(--octo-c-card, #fff); color: var(--octo-c-muted, #6b7280); border: 1px solid var(--octo-c-border, #d1d5db); display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; padding: 0.5rem 0.9rem; border-radius: 4px; font-weight: 500; font-size: 0.875rem; white-space: nowrap; }
.osn-filter-customers-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--octo-c-card-head, #d1d5db); }
/* active: today #E09000 with white text (2.6:1, fails); accent text as on every accent surface */
.osn-filter-customers.is-active { background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color: var(--octo-c-accent, #e09000); }
.osn-filter-customers.is-active .osn-filter-customers-dot { background: var(--octo-c-accent-text, #1a1200); }

/* ranking dot (contacts.js:425-437): fixed surfaces, text chosen by measured contrast */
.osn-ranking-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; }
/* the five tones are the same in both schemes: dark text on green, yellow, orange (measured 8.15 / 11.73 / 7.22), white on red, blue, violet (10.95 / 13.07 / 7.1) */
.osn-ranking-dot.green { background: #22c55e; color: #1a1200; }
.osn-ranking-dot.yellow { background: #e8ce09; color: #1a1200; }
.osn-ranking-dot.orange { background: #e09000; color: #1a1200; }
.osn-ranking-dot.red { background: #800000; color: #ffffff; }
.osn-ranking-dot.blue { background: #003450; color: #ffffff; }
.osn-ranking-dot.purple { background: #6d28d9; color: #ffffff; }

/* ranking box (box-ranking.php): the notes under the circle stood inline; the small chart is an SVG (octo-ranking-sparkline.js drew a canvas) */
.octo-ranking-notice { color: var(--octo-c-text, #111827); font-size: var(--octo-dv-value, 0.875rem); }
.octo-ranking-notice-blocked { color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-ranking-notice-muted { color: var(--octo-c-muted, #6b7280); font-size: var(--octo-dv-label, 0.8125rem); }
.osn-sparkline { display: block; width: 100%; height: 60px; }
/* quick action setup (octo-ranking-funktionen.js renderQuickActionsConfig(): the colour input had an inline style) */
.osn-qa-color { height: 36px; width: 60px; padding: 2px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; }
.octo-ranking-color-dot { background-color: var(--octo-status, #999999); }
.osn-qa-icon { color: var(--qa-color, #e09000); }

/* owner colour strip (contacts.js:286): the colour is data, passed as --osn-owner */
.octo-color-marker.osn-owner { padding: 0; border-left: 5px solid var(--osn-owner, #9ca3af); }

/* inline edit feedback (contacts.js:1144-1175: orange while saving, green saved, red error) */
.octo-field-dropdown.is-saving { border-color: #f59e0b; }
.octo-field-dropdown.is-saved { border-color: #10b981; }
.octo-field-dropdown.is-error { border-color: #ef4444; }
/* status level select: 2px frame in the colour of the main status (contacts.js:557) */
.osn-status-level { padding: 4px 10px; border-radius: 4px; font-size: inherit; font-weight: 500; border: 2px solid var(--octo-status, transparent); }

/* view panel: layout helpers of list.php that stood inline */
.osn-flex-gap { display: flex; gap: 0.5rem; }
.osn-flex-2 { flex: 2; min-width: 0; }
.osn-flex-1 { flex: 1; min-width: 140px; }
.osn-range { display: flex; margin-top: 8px; gap: 8px; }
.osn-range > input { width: calc(50% - 4px); }
.osn-check-text { font-size: 0.875rem; }
.osn-panel-hint { margin: 2px 0 8px 24px; font-size: 0.8rem; color: var(--octo-c-muted, #666); }
.osn-panel-hint--top { margin: 0 0 10px; }
.osn-panel-hint--after { margin: 8px 0 0 24px; }
.osn-indent { margin-left: 24px; }
.osn-mr-16 { margin-right: 16px; }
.osn-label-lg { font-size: 0.875rem; }
.osn-qf-all { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); font-weight: 600; }
.octo-quick-filter-dot.osn-dot { background: var(--octo-status, #9ca3af); }
.osn-empty-note { font-size: 0.8rem; color: var(--octo-c-faint, #6b7280); }
.osn-is-locked { opacity: 0.55; }
.osn-section-locked { opacity: 0.5; pointer-events: none; }

/* pagination ellipsis (contacts.js:1043) */
.osn-ellipsis { padding: 0 0.5rem; }

/* sidebar footer rows (sidebar-footer.php) */
.osn-footer-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.osn-footer-row--2 { margin-top: 4px; }
.osn-footer-row--3 { gap: 8px; margin-top: 17px; width: auto; }
.osn-version { font-size: 0.625rem; color: var(--octo-c-sidebar-text, #d1d5db); letter-spacing: 0.03em; white-space: nowrap; }

/* data view panel footer (data-view-config-panel.php:440) */
.osn-panel-footer-row { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; width: 100%; }
.osn-checkbox-inline { margin: 0; font-size: 0.875rem; }
.osn-icon-16 { font-size: 16px; }

/* detail grid: the column widths are data (data-view config), passed as a variable */
.octo-detail-grid.osn-grid { display: grid; grid-template-columns: var(--osn-cols, 1fr); gap: 1.5rem; }

/* confirm dialog text (octo-confirm.js:39) */
.osn-confirm-text { margin: 0; font-size: 14px; line-height: 1.6; }

/* hidden state (today style="display:none") */

/* contact removal dialog (contacts.js:724-760, inline styles of today as classes) */
.osn-delete-modal { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); }
.osn-delete-modal-content { background: var(--octo-c-card, #fff); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
.osn-delete-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-delete-modal-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--octo-c-text, #111827); }
.osn-delete-modal-close { background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--octo-c-muted, #6b7280); font-size: 1.5rem; line-height: 1; }
.osn-delete-modal-body { padding: 1.5rem; }
.osn-delete-modal-question { margin: 0 0 1rem 0; color: var(--octo-c-text, #374151); line-height: 1.5; }
.osn-delete-modal-footer { display: flex; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #f9fafb); justify-content: flex-end; }
.osn-delete-modal-footer .octo-btn { padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.8125rem; transition: background 0.2s; }
.osn-delete-cancel { background: var(--octo-c-card, #f3f4f6); color: var(--octo-c-text, #111827); border: 1px solid var(--octo-c-border, #e5e7eb); }
/* red is a fixed surface; dark text as measured today (#1a1200 on #ef4444) */
.osn-delete-confirm { background: #ef4444; color: #1a1200; border: 1px solid #ef4444; }
/* today hover #dc2626 under #1a1200 measures 3.7:1; a lighter red keeps the dark text above 4.5 */
.osn-delete-confirm:hover { background: #f87171; }
.osn-spam-confirm { background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border: 1px solid #e09000; }
.osn-spam-confirm:hover { background: #c77d00; }

/* mobile views dialog: icon colour of list.php:487 (light brand blue through --octo-ink) */
.osn-mobile-icon { color: color-mix(in srgb, #4FA5C9 var(--octo-ink, 100%), var(--octo-c-text)); vertical-align: middle; }
/* stale condition of a stored view (V6): shown, not applied */
.octo-filter-row.is-invalid { border-color: #ef4444; }

/* ---------------------------------------------------------------- detail pages
 * Inline styles of today's box templates as classes, same values
 * (templates/contacts/boxes/*.php, templates/companies/detail.php). */
.osn-icon-12 { font-size: 12px; width: 12px; height: 12px; vertical-align: middle; }
.osn-icon-14 { font-size: 14px; width: 14px; height: 14px; }
.osn-icon-bottom { vertical-align: text-bottom; }
.octo-btn .dashicons.osn-icon-14 { font-size: 14px; width: 14px; height: 14px; }
/* dark brand orange through --octo-ink (detail.php:168, box-company_info.php:44) */
.osn-brand-icon { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-company-title-icon { margin-right: 8px; color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-title-icon { margin-right: 6px; }
.osn-cancel-edit { margin-right: 0.5rem; background: var(--octo-c-card, #f3f4f6); color: var(--octo-c-text, #374151); border: 1px solid var(--octo-c-border, #d1d5db); }

/* box form of the pencil (box-contact_info.php:118-140) */
.osn-box-edit-label { display: block; font-size: var(--octo-dv-label, 0.8125rem); font-weight: 500; color: var(--octo-c-muted, #6b7280); margin-bottom: 3px; }
.osn-box-edit-input { width: 100%; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: var(--octo-dv-value, 0.875rem); }
.osn-box-edit-actions { display: flex; gap: 8px; margin-top: 16px; }
.osn-box-save-status { font-size: var(--octo-dv-label, 0.8125rem); line-height: 32px; }

/* address box: "In Google Maps anzeigen" (box-address_info.php:87) */
.osn-maps-link { display: inline-flex; align-items: center; gap: 0.375rem; margin: 1.5rem 1rem; padding: 0.375rem 0.75rem; font-size: var(--octo-dv-value, 0.875rem); color: color-mix(in srgb, rgb(0, 104, 153) var(--octo-ink, 100%), var(--octo-c-text)); border: 1px solid var(--octo-c-border, rgb(209, 213, 219)); border-radius: 0.25rem; text-decoration: none; transition: 0.2s; float: right; }
.osn-maps-link:hover { background-color: color-mix(in srgb, #f0f9ff var(--octo-tint, 100%), var(--octo-c-card)); border-color: #006899; }

/* company box: assignment (box-company_info.php:40-66) */
.osn-company-link-section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); }
.osn-company-link-label { display: block; font-size: var(--octo-dv-label, 0.8125rem); font-weight: 600; color: var(--octo-c-text, #111827); margin-bottom: 6px; }
.osn-linked-company { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: color-mix(in srgb, #f0f9ff var(--octo-tint, 100%), var(--octo-c-card)); border: 1px solid color-mix(in srgb, #bae6fd var(--octo-tint, 100%), var(--octo-c-border)); border-radius: 6px; margin-bottom: 8px; }
.osn-linked-company-name { flex: 1; font-weight: 600; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); text-decoration: none; font-size: var(--octo-dv-value, 0.875rem); }
.osn-unlink { all: unset; cursor: pointer; color: var(--octo-c-muted, #6b7280); font-size: 14px; }
.osn-search-wrap { position: relative; }
.osn-search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: var(--octo-dv-value, 0.875rem); box-sizing: border-box; background: var(--octo-c-input, #ffffff); color: var(--octo-c-text, #111827); }
.osn-search-input--sm { font-size: 0.8125rem; }
.osn-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--octo-c-card, #fff); border: 1px solid var(--octo-c-border, #e5e7eb); border-top: none; border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.osn-search-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); font-size: 13px; }
.osn-search-item:hover { background: var(--octo-c-card-head, #f9fafb); }
.osn-search-item-name { font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-search-item-meta { font-size: 11px; color: var(--octo-c-muted, #6b7280); }
.osn-search-empty { padding: 8px 12px; color: var(--octo-c-faint, #9ca3af); font-size: 13px; }

/* company: owner dot (detail.php:226), primary contact (detail.php:269-290), members (detail.php:302-343) */
.osn-owner-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--osn-owner, #9ca3af); margin-right: 6px; vertical-align: middle; }
.osn-primary { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; }
/* accent surface with accent text */
.osn-primary-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; }
.osn-primary-name { font-weight: 600; color: var(--octo-c-text, #111827); text-decoration: none; font-size: 0.95rem; }
.osn-primary-position { color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
.osn-member { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); }
.osn-member-name { font-weight: 500; color: var(--octo-c-text, #111827); text-decoration: none; }
.osn-member-primary { background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); font-size: 0.6875rem; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.osn-member-position { color: var(--octo-c-muted, #6b7280); font-size: 0.8rem; }
.osn-member-email { color: var(--octo-c-muted, #6b7280); font-size: 0.8rem; }
.osn-member-actions { flex-shrink: 0; margin-left: 8px; }
/* fixed brand blue with white text (5.94:1, design-system-dev.html) */
.osn-set-primary { all: unset; background: #006B95; color: #ffffff; font-size: 0.6875rem; padding: 3px 8px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.osn-member-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--octo-c-border, #f3f4f6); }

/* company notes form (detail.php:642-655) */
.osn-notes-form { margin-top: 12px; border-top: 1px solid var(--octo-c-border, #f3f4f6); padding-top: 12px; }
.osn-note-textarea { width: 100%; padding: 8px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-size: 13px; resize: vertical; box-sizing: border-box; background: var(--octo-c-input, #ffffff); color: var(--octo-c-text, #111827); }
.osn-note-private { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; cursor: pointer; }
/* fixed brand blue with white text (5.94:1) */
.osn-note-add { margin-top: 6px; background: #006B95; color: #ffffff; border-color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 13px; padding: 5px 14px; }

/* task text (box-tasks.php:178) */
.osn-task-snippet { margin-top: 4px; font-size: var(--octo-dv-value, 0.875rem); color: var(--octo-c-text, #111827); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* rows of offers, invoices, contracts (renderInvoices(), detail.php:1192-1196); .octo-inv-status
   and .octo-inv-item stood in a \3c style> block of the page and are kept here with the same values */
.osn-inv-item { text-decoration: none; color: inherit; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); font-size: 13px; }
.osn-inv-item:last-child { border-bottom: none; }
.osn-inv-meta { font-size: 11px; color: var(--octo-c-faint, #9ca3af); }
.osn-doc-section { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--octo-c-border, #f3f4f6); }
body:not(.octo-invoices) .octo-inv-status { font-size: 11px; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
body:not(.octo-invoices) .octo-inv-status.paid { background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
body:not(.octo-invoices) .octo-inv-status.draft { background: var(--octo-c-page, #f3f4f6); color: var(--octo-c-muted, #6b7280); }
body:not(.octo-invoices) .octo-inv-status.overdue { background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
body:not(.octo-invoices) .octo-inv-status.sent { background: color-mix(in srgb, #dbeafe var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text)); }
body:not(.octo-invoices) .octo-inv-status.partially_paid { background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
body:not(.octo-invoices) .octo-inv-status.cancelled { background: var(--octo-c-page, #f3f4f6); color: var(--octo-c-muted, #6b7280); }
body:not(.octo-invoices) .octo-inv-status.finalized { background: color-mix(in srgb, #e0f2fe var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #0369a1 var(--octo-ink, 100%), var(--octo-c-text)); }

/* contact create page (create.php): boxes that need a stored contact are greyed out */
.osn-create-later { opacity: 0.55; pointer-events: none; }
.osn-dupe-error { display: flex; align-items: flex-start; gap: 0.75rem; margin: 1rem 0; padding: 1rem; background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); border: 1px solid #dc2626; border-radius: 0.375rem; }
.osn-dupe-icon { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 24px; margin-top: 2px; }
.osn-dupe-title { margin: 0 0 0.5rem 0; color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.875rem; font-weight: 600; }
.osn-dupe-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* company create dialog (companies.js:644-720) */
.osn-create-modal { background: var(--octo-c-card, #fff); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); width: 100%; max-width: 550px; max-height: 85vh; display: flex; flex-direction: column; }
.osn-create-modal-header { background: var(--octo-c-card, #f9fafb); }
.osn-create-modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.osn-create-label { display: block; font-weight: 600 !important; color: var(--octo-c-text, #374151); margin-bottom: 6px; font-size: 0.95rem; }
.osn-create-cancel, .osn-create-submit { padding: 0.6rem 1.2rem; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; }
.osn-create-cancel { background: var(--octo-c-card, #f3f4f6); color: var(--octo-c-text, #111827); border: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-create-submit { background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border: 1px solid #e09000; }
#octo-create-company-modal .osn-create-label { font-weight: 600 !important; }
.osn-create-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; margin-bottom: 1rem; }
.osn-mb-1 { margin-bottom: 1rem; }
.osn-dupe-warning { display: flex; align-items: flex-start; gap: 0.75rem; margin: 1rem 0; padding: 1rem; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); border: 1px solid color-mix(in srgb, #fbbf24 var(--octo-tint, 100%), var(--octo-c-border)); border-radius: 0.375rem; }
.osn-dupe-warning-icon { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 24px; margin-top: 2px; }
.osn-dupe-warning-title { margin: 0 0 0.5rem 0; color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.875rem; font-weight: 600; }

/* sign-in: second factor (new with R4, in the card of today's login) and messages */
.osn-login-qr { display: block; margin: 0 auto 16px; width: 180px; height: 180px; }
.osn-login-secret { display: block; text-align: center; font-family: monospace; font-size: 0.875rem; letter-spacing: 0.08em; margin-bottom: 16px; word-break: break-all; }
.osn-login-hint { text-align: center; margin: 0 0 16px 0; color: #6b7280; font-size: 0.8125rem; }
.osn-login-back { color: #6b7280; font-size: 0.875rem; text-decoration: none; }
.osn-login-remember { display: inline-flex; align-items: center; gap: 8px; color: #6b7280; margin-bottom: 20px; }
/* today the font of the sign-in page comes from the global styles of the site (wp_head); here the
   stack of dashboard.css .octo-dashboard */
body.octo-login { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* F14: number of records of a view in the submenu (new); on the dark submenu, light text as the link */
.osn-nav-count { margin-left: auto; padding: 0 0.45rem; border-radius: 999px; font-size: 0.8rem; line-height: 1.4rem; background: rgba(255, 255, 255, 0.12); color: var(--octo-c-on-dark, #ffffff); }

/* dialogs of the boxes (box-notes.php, box-tasks.php, box-files.php) */
.osn-pre { white-space: pre-wrap; word-break: break-word; }
.osn-rename-old { font-size: 13px; word-break: break-all; color: var(--octo-c-muted, #6b7280); }
.osn-rename-preview { font-size: 13px; font-weight: 600; word-break: break-all; }
.osn-mr-8 { margin-right: 8px; }
.osn-task-done { margin-right: auto; }
.octo-task-item.is-done .octo-task-title { text-decoration: line-through; color: var(--octo-c-muted, #6b7280); }

/* contrast corrections of copied rules, measured with seitenpruefung.js:
   required star #ef4444 on white 3.76:1, "Löschen" in "Alle Notizen" #dc2626 on #fef2f2 4.41:1 */
:is(.octo-contact-detail-page, .octo-companies, .octo-contacts, .octo-deals) .octo-modal .octo-form-group label .required { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }

/* ===================================================================== offers and invoices
 * Inline styles of today's templates and scripts as classes with the same values
 * (templates/proposal/*.php, octo-proposal assets/js/*.js, templates/invoice/*.php,
 * octo-invoice admin/views/*.php). Data colours come in as CSS variables (--osn-swatch, --osn-tpl).
 */
.osn-block { display: block; }
.osn-flex { display: flex; }
.octo-modal.osn-modal-open { display: flex; align-items: center; justify-content: center; opacity: 1; }
.octo-modal .octo-modal-content.osn-modal-700 { max-width: 700px; }
.octo-modal .octo-modal-content.osn-modal-760 { max-width: 760px; }
.osn-mb-8 { margin-bottom: 8px; }
.osn-mb-12 { margin-bottom: 12px; }
.osn-mb-16 { margin-bottom: 16px; }
.osn-mb-20 { margin-bottom: 20px; }
.osn-mt-4 { margin-top: 4px; }
.osn-mt-6 { margin-top: 6px; }
.osn-mt-8 { margin-top: 8px; }
.osn-mt-10 { margin-top: 10px; }
.osn-mt-12 { margin-top: 12px; }
.osn-mt-14 { margin-top: 14px; }
.osn-mt-16 { margin-top: 16px; }
.osn-mt-20 { margin-top: 20px; }
.osn-ml-auto { margin-left: auto; }
.osn-fix-90, .octo-inv-field-row .osn-fix-90 { flex: 0 0 90px; }
.osn-fix-110, .octo-inv-field-row .osn-fix-110 { flex: 0 0 110px; }
.osn-fix-130, .octo-inv-field-row .osn-fix-130 { flex: 0 0 130px; }
.osn-fix-180, .octo-inv-field-row .osn-fix-180 { flex: 0 0 180px; }
.osn-fix-200, .octo-inv-field-row .osn-fix-200 { flex: 0 0 200px; }
.osn-fix-220, .octo-inv-field-row .osn-fix-220 { flex: 0 0 220px; }
.osn-flex-1-only { flex: 1; }
.osn-w-80 { width: 80px; }
.osn-w-110 { width: 110px; }
.osn-w-140 { width: 140px; }
.osn-w-160 { width: 160px; }
.osn-w-200 { width: 200px; }
.osn-minw-140 { min-width: 140px; }
.osn-minw-200 { min-width: 200px; }
.osn-maxw-360 { max-width: 360px; }
.osn-fs-12 { font-size: 0.8rem; }
.osn-o60 { opacity: 0.6; }
.osn-o70 { opacity: 0.7; }
.osn-o80 { opacity: 0.8; }
.osn-small-block { display: block; }
.osn-faint { color: var(--octo-c-faint, #6b7280); }
.osn-inline-icon { font-size: 14px; width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; }
.osn-muted-note { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin: 4px 0; }
.osn-spin { animation: spin 1s linear infinite; }

/* offer list and detail (octo-proposal.js, octo-proposal-detail.js) */
.osn-row-foreign { opacity: 0.75; }
.osn-help-mb { margin: 0 0 10px; }
.osn-mail-subject { margin: 0 0 8px; }
.osn-mail-proof { font-size: 0.8rem; opacity: 0.75; margin-bottom: 14px; }
.osn-mail-text { white-space: pre-wrap; line-height: 1.5; }
/* writing window status (octo-mail-compose.js meldung()): fixed pairs */
.osn-compose-status { margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: var(--octo-dv-label, 0.8125rem); }
.osn-compose-status.is-waiting { background: #fff4e5; color: #92400e; border: 1px solid #f59e0b; }
.osn-compose-status.is-good { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.osn-compose-status.is-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* offer editor without id (builder.php) */
.osn-builder-empty { max-width: 520px; margin: 80px auto; text-align: center; }

/* offer settings pages (page-settings.php, page-layouts.php, templates.php, brandings.php) */
.osn-check-row { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.osn-check-row.osn-check-row-top { align-items: flex-start; font-size: 0.875rem; margin: 0; }
.octo-inv-field .osn-check-row { display: flex; margin: 0 0 3px; }
.osn-check-row-top input { margin-top: 4px; }
.osn-field-bottom { display: flex; align-items: flex-end; padding-bottom: 4px; }
.osn-num-preview { background: color-mix(in srgb, #EAF6FB var(--octo-tint, 100%), var(--octo-c-card)); border-radius: .5rem; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.osn-num-preview-label { font-size: 13px; color: var(--octo-c-muted, #555); }
.osn-num-preview-code { font-size: 0.95rem; font-weight: 700; color: var(--octo-c-text, #111827); background: none; padding: 0; }
/* dark scheme: today's #555 / #003450 mixed with the text colour reach only 4.1 / 4.3 on the tinted box (measured) */
.osn-note-faint { font-size: 0.8rem; color: var(--octo-c-faint, #888); margin-top: 10px; }
.osn-note-tight { margin: -4px 0 14px; }
.osn-card-muted { background: var(--octo-c-card-head, #f8fafc); }
.osn-card-text { font-size: 13px; color: var(--octo-c-muted, #555); line-height: 1.6; margin: 0 0 10px; }
.osn-card-text-12 { margin-bottom: 12px; }
.osn-text-action { margin-left: 4px; padding: 4px 9px; font-size: 0.8rem; font-weight: 600; }
.osn-cell-preview { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osn-ph-list { margin: 6px 0 0; padding-left: 18px; }
.osn-branding-logo { max-height: 32px; max-width: 80px; object-fit: contain; border-radius: 2px; }
.osn-branding-logo-preview { max-height: 60px; max-width: 200px; margin-top: 8px; object-fit: contain; }
.osn-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #cbd5e1; background: var(--osn-swatch, transparent); vertical-align: middle; margin-right: 6px; }

/* recipient (templates/invoice/editor.php) */
.octo-inv-field label.osn-inv-sublabel, .osn-inv-sublabel { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-bottom: 4px; display: block; }
.osn-inv-company-count { margin-left: auto; font-size: 11px; color: var(--octo-c-faint, #9ca3af); }

/* invoice list (templates/invoice/list.php) */
.osn-inv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.osn-w-28p { width: 28%; }
.osn-w-12p { width: 12%; }
.osn-w-14p { width: 14%; }
.osn-inv-filters-end { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* inline style of today's template: beats the dark-theme input rule, so !important here */
.osn-inv-month { height: 30px; font-size: 0.8rem; border: 1px solid var(--octo-c-border, #9ca3af) !important; border-radius: 5px; padding: 0 6px; color: var(--octo-c-muted, #555) !important; }
.osn-inv-load-error { text-align: center; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-inv-empty { text-align: center; padding: 30px; color: var(--octo-c-muted, #888); }
.osn-inv-total { font-size: 0.8rem; color: var(--octo-c-muted, #666); }

/* invoice editor and detail (templates/invoice/editor.php, detail.php) */
.osn-label-note { font-weight: 400; color: var(--octo-c-muted, #888); font-size: 11px; }
.osn-grid-full { grid-column: 1 / -1; }
.osn-inv-track { font-size: 0.8rem; }
.osn-inv-track-ok { color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-inv-track-open { color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-inv-track-fail { color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-icon-14 { font-size: 14px; width: 14px; height: 14px; vertical-align: middle; }
.osn-inv-overpaid { font-size: 0.8rem; color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-inv-addr-mail { color: var(--octo-c-muted, #555); font-size: 0.8rem; }
.osn-inv-recipient-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.osn-inv-locked-hint { margin-top: 8px; font-size: 0.8rem; color: var(--octo-c-muted, #888); }
.osn-inv-noitems { color: var(--octo-c-muted, #888); text-align: center; padding: 16px; }
.osn-inv-disc-label { text-align: right; font-size: 0.8rem; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-inv-nopay { color: var(--octo-c-muted, #888); font-size: 13px; }
.octo-inv-glass-btn.osn-inv-paydel { margin-left: 8px; padding: 2px 8px; font-size: 11px; }
.osn-inv-disc-hint { font-size: 13px; color: var(--octo-c-muted, #888); margin-bottom: 12px; }
.osn-inv-disc-preview { margin-top: 8px; font-size: 13px; color: var(--octo-c-muted, #555); }

/* invoice settings (page-settings.php) */
.osn-logo-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.osn-logo-url { min-width: 320px; }
.osn-tax-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.osn-zugferd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: .5rem; font-size: 13px; margin-top: 8px; }
.osn-zugferd-ok { background: color-mix(in srgb, #ecfdf5 var(--octo-tint, 100%), var(--octo-c-card)); border: 1.5px solid color-mix(in srgb, #86efac var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-zugferd-warn { background: color-mix(in srgb, #fffbeb var(--octo-tint, 100%), var(--octo-c-card)); border: 1.5px solid color-mix(in srgb, #fde68a var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-save-row { margin-top: 8px; margin-bottom: 32px; }

/* invoice e-mail templates (page-templates.php): the colour of a template is data (--osn-tpl) */
.osn-tpl-stripe { background: var(--osn-tpl, #aaaaaa); }
.osn-tpl-type { color: color-mix(in srgb, var(--osn-tpl, #aaaaaa) 55%, var(--octo-c-text)); }
.osn-tpl-dot { background: var(--osn-tpl, #aaaaaa); }
.osn-tpl-small { font-weight: 400; color: var(--octo-c-faint, #9ca3af); }
.osn-tpl-color { width: 100%; height: 36px; padding: 2px 4px; border: 1px solid #9ca3af; border-radius: 6px; cursor: pointer; }
/* dark scheme: placeholder chips of the copied octo-invoice-admin.css reach 4.31 (measured) */
[data-octo-theme="dark"] .tpl-ph-chip { color: var(--octo-c-text); }

/*
 * Products, pricing model, module generator, recurring invoices, customer account, media picker:
 * today's inline styles of products.php / octo-proposal-products.js, page-recurring.php,
 * contact-account.php and the indentation of the categories in octo-media-picker.js.
 */
.osn-empty-row { color: var(--octo-c-faint, #aaa); font-style: italic; }
.osn-external-tag { font-size: 11px; }
.osn-included { opacity: 0.75; }
.osn-mono { font-family: monospace; }
.osn-uppercase { text-transform: uppercase; }
.octo-mp-cat.osn-mp-depth-0 { padding-left: 10px; }
.octo-mp-cat.osn-mp-depth-1 { padding-left: 24px; }
.octo-mp-cat.osn-mp-depth-2 { padding-left: 38px; }
.octo-mp-cat.osn-mp-depth-3 { padding-left: 52px; }
.octo-mp-cat.osn-mp-depth-4 { padding-left: 66px; }
.osn-rec-icon { width: 16px; height: 16px; color: var(--octo-c-faint, #9ca3af); }
.osn-rec-icon-sm { width: 13px; height: 13px; }
.osn-rec-icon-xs { width: 11px; height: 11px; }
.osn-rec-muted { color: var(--octo-c-faint, #9ca3af); }
.osn-rec-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-recurring-page tr.osn-rec-overdue { background: color-mix(in srgb, #fef2f2 var(--octo-tint, 100%), var(--octo-c-card)); }
#octo-recurring-page tr.osn-rec-soon { background: color-mix(in srgb, #fffdf0 var(--octo-tint, 100%), var(--octo-c-card)); }
.osn-rec-actions-col { width: 100px; }
.osn-cycles-fill { width: var(--osn-fill, 0%); }
.osn-ca-company { font-weight: 400; color: var(--octo-c-muted, #555); }
.osn-ca-small { font-weight: 400; color: var(--octo-c-muted, #888); font-size: 0.8rem; }
.osn-rec-day { flex: 0 0 120px; }
.osn-w-70 { width: 70px; }

/* Contract page (M12): two columns like the company page, one on phones */
.octo-detail-grid.osn-contract-grid { --osn-cols: 1fr 1fr; }
@media (max-width: 768px) { .octo-detail-grid.osn-contract-grid { --osn-cols: 1fr; } }
.osn-contract-items { width: 100%; }
.osn-contract-add { margin-top: 12px; }
.osn-contract-status { margin-left: 8px; font-size: 0.8rem; vertical-align: middle; }

/* F93: on a phone only own mobile views; without any only the "all" entry (dashboard.css hides the rest when mobile views exist) */
@media (max-width: 768px) {
    .octo-nav-submenu.osn-nav-no-mobile-views > li:not(.osn-nav-all-entry) { display: none; }
}

/* Pipeline (M7): numbers right-aligned in the deal list and on the deal page */
.osn-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Kanban card: stage colour as left edge and wash (octo-kanban.js renderDealCard(): rgba 0.6 / 0.15 to white), user colour on top (--user-color) */
.octo-kanban-card.osn-kanban-card {
    cursor: pointer;
    border-left: 4px solid color-mix(in srgb, var(--octo-status, #e5e7eb) 60%, transparent);
    background-image: linear-gradient(to right, color-mix(in srgb, var(--octo-status, #e5e7eb) 15%, transparent) 0%, transparent 100%);
}
/* drop target while dragging (today the placeholder of jQuery UI sortable) */
.octo-kanban-sublane-deals.osn-kanban-over { outline: 2px dashed var(--octo-c-border, #9ca3af); outline-offset: -4px; }
/* deal dialog: inline styles of box-pipeline.php as classes */
.osn-deal-primary { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--octo-c-border, #e5e7eb); }
/* today inline on the elements, so they win over the Kanban dialog rules of octo-kanban.css (#octo-deal-modal …) */
#octo-deal-modal .octo-form-group label.osn-deal-primary-label, .osn-deal-primary-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#octo-deal-modal .octo-form-group .osn-deal-primary-label input[type="checkbox"], .osn-deal-primary-label input[type="checkbox"] { width: auto; margin: 0; }
.osn-deal-primary-hint { margin: 5px 0 0 0; font-size: var(--octo-dv-label, 0.8125rem); color: var(--octo-c-muted, #6b7280); }
.osn-deal-more { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-deal-more-title { margin: 0 0 10px 0; font-size: var(--octo-dv-value, 0.875rem); font-weight: 600; color: var(--octo-c-text, #111827); }
.octo-deal-item-title .osn-deal-link { color: inherit; text-decoration: none; }
.octo-deal-item-title .osn-deal-link:hover { text-decoration: underline; }
.octo-deal-item-date.osn-deal-contact::before { content: none; }
/* Settings -> Pipelines: win probability (O1) and outcome (F87) per stage */
.octo-pl-table input.octo-input.osn-pl-probability { width: 80px !important; text-align: right; display: inline-block !important; }
.octo-pl-table select.octo-input.osn-pl-outcome { width: auto !important; min-width: 130px; display: inline-block !important; }
/* Kontrastkorrektur (measured with seitenpruefung.js): value green #059669 on white 3.8:1 (box 3.6:1), counts muted/faint on the grey pill 4.2-4.5:1 (dark 3.3:1) */
.octo-kanban-card-value, .octo-deal-item-value { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-kanban-lane-count, .octo-kanban-sublane-count { color: var(--octo-c-text, #111827); }

/* ===================================================================== settings area
 * templates/einstellungen/{users,roles,system,design,salestats,api-keys}.php and
 * templates/funktionen/custom-fields.php: inline styles of the templates as classes, same values. */

/* Design > Branding: logo background of the sidebar is data of the tenant (--osn-sidebar-bg) */
.octo-sidebar-header.osn-sidebar-bg { background: var(--osn-sidebar-bg); }
.octo-logo-preview.osn-sidebar-bg { background: var(--osn-sidebar-bg); }
/* sign-in: background behind the tenant logo (templates/login.php:77 inline style; colour is data) */
.octo-login-logo.osn-login-logo-bg { background: var(--osn-login-logo-bg); border-radius: 8px; padding: 10px; }

/* sorting by drag and drop (salestats.php ddInitSortable(): opacity 0.4, 2px line above the target) */
.osn-drag-source { opacity: 0.4; }
.osn-drag-over { border-top: 2px solid #006B95 !important; }

/* tabs as on the design page (design.php dtab links) */
.osn-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--octo-c-border, #e5e7eb); margin-bottom: 24px; flex-wrap: wrap; }
.osn-tab { padding: 10px 20px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--octo-c-muted, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.osn-tab.is-active { font-weight: 600; color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); border-bottom-color: #e09000; }

/* Funktionen > Zusatzfelder (custom-fields.php, octo-custom-fields.js) */
.octo-content-header.osn-cf-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.osn-cf-intro { color: var(--octo-c-muted, #6b7280); margin: 4px 0 0; font-size: 0.875rem; }
.osn-cf-add-group { all: unset; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); font-size: 0.8125rem; font-weight: 500; padding: 6px 14px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.osn-cf-add-group .dashicons { font-size: 14px; width: 14px; height: 14px; }
.osn-cf-groups { margin-top: 24px; }
.osn-cf-loading { text-align: center; padding: 40px; color: var(--octo-c-faint, #9ca3af); font-size: 0.875rem; }
.osn-cf-empty { padding: 40px; text-align: center; color: var(--octo-c-faint, #9ca3af); }
.osn-cf-empty .dashicons { font-size: 48px; width: 48px; height: 48px; display: block; margin: 0 auto 12px; }
.osn-cf-empty-title { margin: 0; font-size: 0.95rem; }
.osn-cf-empty-text { margin: 8px 0 0; font-size: 0.8125rem; }
.osn-cf-group-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #1e293b; color: var(--octo-c-on-dark, #ffffff); border-radius: 10px 10px 0 0; cursor: move; }
.osn-cf-group-title { display: flex; align-items: center; gap: 8px; }
.osn-cf-grip { color: rgba(255, 255, 255, 0.4); font-size: 14px; width: 14px; height: 14px; }
.osn-cf-category-icon { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 16px; width: 16px; height: 16px; }
.osn-cf-group-header .octo-cf-group-name { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--octo-c-on-dark, #fff); }
.osn-cf-count { color: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 50%, transparent); font-size: 0.8rem; }
.osn-cf-group-actions { display: flex; gap: 8px; align-items: center; }
.osn-cf-rename { all: unset; cursor: pointer; color: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 60%, transparent); font-size: 0.8rem; }
.osn-cf-delete-group { all: unset; cursor: pointer; color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; }
.osn-cf-rename .dashicons, .osn-cf-delete-group .dashicons, .osn-cf-edit .dashicons, .osn-cf-delete .dashicons { font-size: 14px; width: 14px; height: 14px; }
.osn-cf-add-field { all: unset; cursor: pointer; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); font-size: 0.6875rem; padding: 3px 10px; border-radius: 4px; font-weight: 500; }
.osn-cf-no-fields { padding: 20px; text-align: center; color: var(--octo-c-faint, #9ca3af); font-size: 0.8125rem; }
.osn-cf-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.osn-cf-table thead tr { border-bottom: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #f9fafb); }
.osn-cf-th-handle { width: 30px; padding: 8px; }
.osn-cf-th-actions { width: 80px; padding: 8px; }
.osn-cf-table tbody tr { border-bottom: 1px solid var(--octo-c-border, #f3f4f6); }
.osn-cf-handle { padding: 8px; cursor: move; color: var(--octo-c-faint, #9ca3af); text-align: center; }
.osn-cf-handle .dashicons { font-size: 12px; width: 12px; height: 12px; }
.osn-cf-label { padding: 8px; font-weight: 500; }
.osn-cf-key { padding: 8px; font-family: monospace; color: var(--octo-c-muted, #6b7280); font-size: 0.8rem; }
.osn-cf-type { background: var(--octo-c-card, #f3f4f6); padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; }
.osn-cf-actions { padding: 8px; text-align: right; }
.osn-cf-edit { all: unset; cursor: pointer; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); margin-right: 8px; }
.osn-cf-delete { all: unset; cursor: pointer; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-modal-content.osn-cf-modal { max-width: 560px; }
.osn-cf-modal-body { padding: 20px; }
.osn-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.octo-modal form label.osn-cf-field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.octo-modal form input.osn-cf-key-input[type="text"] { width: 100%; padding: 8px 12px; cursor: text; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 0.875rem; font-family: monospace; }
.osn-cf-block { margin-top: 16px; }
.osn-cf-block-small { margin-top: 10px; }
.osn-cf-options { display: flex; flex-direction: column; gap: 6px; }
.osn-cf-option-row { display: flex; gap: 6px; align-items: center; }
.osn-cf-option-handle { cursor: move; color: var(--octo-c-faint, #9ca3af); font-size: 14px; width: 14px; height: 14px; }
.osn-cf-option-input { flex: 1; padding: 6px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-size: 0.8125rem; }
.osn-cf-remove-option { all: unset; cursor: pointer; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 14px; }
.octo-modal .osn-cf-add-option { all: unset; padding: 4px 8px; border-radius: 6px; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 0.8125rem; cursor: pointer; font-weight: 500; }
.osn-cf-check { padding: 12px 14px; background: var(--octo-c-card, #f9fafb); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-cf-check label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 0; }
.osn-cf-check input { margin-top: 2px; }
.osn-cf-check-title { display: block; font-size: 0.8125rem; font-weight: 500; }
.osn-cf-check-text { display: block; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-top: 2px; }
.osn-cf-buttons { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }
@media (max-width: 600px) { .osn-cf-grid { grid-template-columns: 1fr; } }

/* Einstellungen > SalesStats (salestats.php inline styles) */
.osn-ss-intro { margin-top: 5px; color: var(--octo-c-muted, #6b7280); font-size: 0.95rem; }
.osn-ss-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--octo-c-border, #e5e7eb); }
.osn-ss-tab { all: unset; padding: 8px 16px; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--octo-c-muted, #6b7280); margin-bottom: -2px; }
.osn-ss-tab.active { font-weight: 600; border-bottom: 2px solid #006B95; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ss-options { min-height: 60px; }
.osn-ss-none { color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
.osn-ss-sortable { display: flex; flex-direction: column; gap: 4px; }
.osn-ss-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--octo-c-card, #fff); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; cursor: grab; }
.osn-ss-grip { color: var(--octo-c-faint, #d1d5db); font-size: 16px; width: 16px; height: 16px; cursor: grab; }
.osn-ss-label { flex: 1; font-size: 0.875rem; font-weight: 500; }
.osn-ss-edit { all: unset; cursor: pointer; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 13px; }
.osn-ss-delete { all: unset; cursor: pointer; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 13px; }
.osn-ss-edit .dashicons, .osn-ss-delete .dashicons { font-size: 16px; width: 16px; height: 16px; }
.osn-ss-new { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.osn-ss-new input { flex: 1; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 0.875rem; }
.osn-ss-add { all: unset; background: #006B95; color: var(--octo-c-on-dark, #ffffff); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.osn-ss-message { margin-top: 8px; font-size: 0.8125rem; }
.osn-ss-message.is-ok, .osn-ss-save-message.is-ok { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ss-message.is-error, .osn-ss-save-message.is-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ss-loading { text-align: center; padding: 40px; color: var(--octo-c-muted, #6b7280); }
.osn-ss-loading .dashicons { font-size: 24px; animation: spin 2s linear infinite; }
.osn-ss-level { margin-bottom: 20px; padding: 15px; background: var(--octo-c-card, #f9fafb); border-radius: 8px; }
.osn-ss-level label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 0.875rem; }
.osn-ss-level select { width: 100%; max-width: 400px; padding: 8px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
.osn-ss-level-hint { margin-top: 8px; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.osn-ss-color-row { display: flex; align-items: center; margin-bottom: 10px; }
.osn-ss-allowed { display: block; margin-bottom: 8px; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.osn-ss-save { padding: 0 20px 20px; }
.osn-ss-save-message { margin-left: 10px; }

/* Einstellungen > Benutzer (users.php inline styles) */
.octo-content-header.osn-users-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.osn-users-header-tools { display: flex; gap: 10px; align-items: center; }
@media (max-width: 600px) { .osn-users-header-tools { flex-wrap: wrap; } }
.octo-input.osn-users-search { width: 250px; }
.octo-btn.osn-users-add { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; padding: 0.625rem 1.25rem; }
.osn-users-add .dashicons { font-size: 18px; width: 18px; height: 18px; }
.osn-users-actions-head { text-align: right; width: 80px; }
.osn-users-actions { text-align: right; white-space: nowrap; }
.octo-icon-btn.osn-users-icon { margin-right: 5px; }
.osn-users-actions .dashicons { font-size: 16px; width: 16px; height: 16px; }
.osn-users-card { margin-top: 30px; }
.description.osn-users-desc { padding: 8px 20px 0; }
.osn-users-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.osn-users-save-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--octo-c-border, #f3f4f6); display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.osn-users-status { font-size: 13px; }
.osn-users-status.is-ok, .osn-user-message.is-ok { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-users-status.is-error, .osn-user-message.is-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-user-message { margin-bottom: 15px; font-size: 0.875rem; }
.octo-modal-content.osn-user-modal { max-width: 600px; max-height: 90vh; overflow-y: auto; }
.octo-modal-content.osn-nav-modal { max-width: 700px; }
.octo-modal-content.osn-delete-user-modal { max-width: 480px; }
.osn-delete-user-text { margin-bottom: 16px; }
.osn-delete-user-label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }
.osn-delete-user-select { width: 100%; padding: 8px; border: 1px solid var(--octo-c-border, #cbd5e1); border-radius: 4px; font-size: 0.875rem; }
.osn-delete-user-hint { margin-top: 8px; font-size: 0.8rem; color: var(--octo-c-muted, #888); }
/* Navigationszugänge (users.js renderNavPermissions()) */
.osn-nav-all { display: block; margin: 0 0 15px 0; padding-bottom: 12px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); cursor: pointer; font-weight: 600; }
.osn-nav-scroll { max-height: 500px; overflow-y: auto; padding-right: 10px; }
.osn-nav-section { margin-bottom: 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #ffffff); }
.osn-nav-section-header { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; background: var(--octo-c-card, #f9fafb); border-radius: 6px 6px 0 0; }
.osn-nav-section-header.has-children { cursor: pointer; }
.osn-nav-main { display: flex; align-items: center; margin: 0; cursor: pointer; flex: 1; }
.osn-nav-main span { font-size: 14px; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-nav-toggle { color: var(--octo-c-muted, #6b7280); font-size: 18px; transition: transform 0.2s; }
.osn-nav-toggle.is-open { transform: rotate(180deg); }
.osn-nav-children { padding: 8px 15px 12px 35px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-nav-child { display: flex; align-items: center; margin: 6px 0; cursor: pointer; }
.osn-nav-child span { font-size: 13px; color: var(--octo-c-text, #374151); }
@media (max-width: 600px) { .osn-users-two { grid-template-columns: 1fr; } .octo-input.osn-users-search { width: 100%; } }

/* Einstellungen > Rollen (roles.php inline styles); the colour of a function card is data (--osn-perm, --osn-perm-ink) */
.octo-card.osn-roles-info { background: color-mix(in srgb, #f0f9ff var(--octo-tint, 100%), var(--octo-c-card)); border-left: 4px solid #e09000; padding: 15px 20px; margin-bottom: 20px; }
.osn-roles-info p { margin: 0; font-size: 0.875rem; color: var(--octo-c-text, #111827); }
.osn-roles-num { text-align: right; width: 100px; }
.osn-roles-date { text-align: right; width: 130px; }
.octo-modal-content.osn-role-modal { max-width: 1200px; max-height: 90vh; overflow-y: auto; }
.osn-role-message { margin-bottom: 15px; }
.osn-perm-list { display: flex; flex-direction: column; gap: 8px; }
.osn-perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.octo-modal label.osn-perm-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 6px; background: color-mix(in srgb, var(--osn-perm, #6366f1) 8%, transparent); border-left: 3px solid var(--osn-perm, #6366f1); cursor: pointer; }
.osn-perm-title { font-weight: 600; color: color-mix(in srgb, var(--osn-perm-ink, #4338ca) var(--octo-ink, 100%), var(--octo-c-text)); margin-bottom: 2px; }
.octo-input.osn-role-users { height: 300px; min-height: 300px; }
@media (max-width: 600px) { .osn-perm-grid { grid-template-columns: 1fr; } }

/* Einstellungen > System (system.php inline styles; rows as WordPress > Allgemein) */
.osn-sys-h2 { padding: 20px 20px 0; margin: 0; font-size: 0.95rem; font-weight: 600; }
.description.osn-sys-desc { padding: 8px 20px; margin: 0; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.form-table.osn-sys-table { margin-top: 0; }
.octo-input.osn-sys-select { max-width: 320px; }
.description.osn-sys-hint { margin: 6px 0 0 0; font-size: 0.8125rem; color: var(--octo-c-faint, #9ca3af); }
.osn-sys-radio { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; margin-bottom: 6px; flex-wrap: wrap; }
.osn-sys-radio code { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-sys-custom { width: 120px; padding: 4px 8px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; font-family: monospace; }
.osn-sys-preview { font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }
.osn-sys-save { margin-top: 20px; padding-left: 0; }
.octo-btn.osn-sys-save-btn { font-size: 0.8125rem; }
.osn-sys-status { margin-left: 15px; font-size: 0.875rem; }
.osn-sys-status.is-ok, .osn-design-message.is-ok { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-sys-status.is-error, .osn-design-message.is-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }

/* Einstellungen > Design (design.php inline styles) */
.osn-design-intro { margin-top: 0; color: var(--octo-c-muted, #6b7280); font-size: 0.95rem; }
.osn-design-list { min-height: 60px; }
.osn-design-sortable { display: flex; flex-direction: column; gap: 4px; }
.osn-design-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--octo-c-card, #fff); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; cursor: grab; }
.osn-design-grip { color: var(--octo-c-faint, #d1d5db); font-size: 16px; width: 16px; height: 16px; cursor: grab; flex-shrink: 0; }
.osn-design-icon { font-size: 18px; width: 18px; height: 18px; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); flex-shrink: 0; }
.osn-design-label { font-size: 0.875rem; font-weight: 500; color: var(--octo-c-text, #374151); }
.osn-design-message { margin-top: 8px; font-size: 0.8125rem; }
.osn-design-color { display: flex; align-items: center; gap: 10px; }
.osn-design-save { margin-top: 24px; border-top: 1px solid var(--octo-c-border, #f3f4f6); padding-top: 20px; display: flex; align-items: center; gap: 12px; }
.osn-design-save .osn-design-message { margin-top: 0; font-size: 0.875rem; }
@media (max-width: 600px) { .octo-design-row { flex-direction: column; gap: 8px; } .octo-design-label { width: auto; } }

/* Einstellungen > API-Keys (api-keys.php inline styles) */
.osn-keys-intro { margin: 4px 0 0; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.octo-card.osn-keys-empty { padding: 24px; }
.osn-keys-empty p { color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; margin: 0; }
.osn-keys-head { padding: 20px 20px 0; }
.osn-keys-head h2 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.osn-keys-head p { margin: 6px 0 0; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.osn-keys-body { padding: 16px 20px 20px; }
.osn-keys-th { width: 220px; font-size: 0.875rem; font-weight: 500; padding: 14px 0 12px; text-align: left; vertical-align: top; }
.osn-keys-td { padding: 10px 0 10px 40px; }
.osn-keys-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 0.6875rem; border-radius: 9999px; font-weight: 600; vertical-align: middle; }
.osn-keys-badge.is-set { background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-keys-badge.is-unset { background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-keys-row { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.osn-keys-input { flex: 1; font-size: 0.875rem; padding: 8px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-family: monospace; min-width: 0; }
.osn-keys-desc { margin: 6px 0 0; font-size: 0.8rem; color: var(--octo-c-faint, #9ca3af); }
.osn-keys-status { margin-top: 6px; font-size: 0.8125rem; word-break: break-all; }
@media (max-width: 600px) { .osn-keys-th, .osn-keys-td { display: block; width: auto; padding: 8px 0; } }

/* Einstellungen > Tags: today's dialog "Tags verwalten" (campaigns.js openTagsModal()) as a card */
.octo-card.osn-tags-card { max-width: 600px; }
.osn-tags-body { padding: 18px; }
.osn-tags-new { margin-bottom: 18px; }
.osn-tags-label { display: block; margin: 0 0 8px 0; font-size: 13px; color: var(--octo-c-text, #444); }
.osn-tags-input { width: 100%; padding: 10px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 14px; box-sizing: border-box; margin-bottom: 8px; }
.osn-tags-input.is-invalid { border-color: #dc2626; }
.osn-tags-add { width: 100%; padding: 10px 12px; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.osn-tags-list { display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
.osn-tags-none { text-align: center; color: var(--octo-c-faint, #6b7280); padding: 20px; }
.osn-tags-error { text-align: center; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-tags-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #f9f9f9); }
.osn-tags-name { font-size: 13px; }
.osn-tags-actions { display: flex; gap: 6px; }
.osn-tags-edit { padding: 4px 8px; background: none; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; cursor: pointer; font-size: 11px; color: var(--octo-c-text, #111827); }
/* phones: wide tables scroll inside their card, the page itself does not */
.osn-scroll-x, .octo-cf-fields-container { overflow-x: auto; }
@media (max-width: 600px) { .osn-keys-body .form-table, .osn-keys-body .form-table tbody, .osn-keys-body .form-table tr { display: block; width: 100%; } .osn-keys-row { flex-wrap: wrap; } }

/* Box "E-Mails" (templates/contacts/boxes/box-emails.php inline styles as classes, same values) */
.octo-modal .octo-modal-content.osn-modal-820 { max-width: 820px; }
.osn-muted { color: var(--octo-c-muted, #6b7280); }
.osn-mail-row { padding: 8px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); display: flex; align-items: center; gap: 12px; }
.osn-mail-row-main { flex: 1; cursor: pointer; }
.osn-mail-row-subject { font-weight: 500; color: var(--octo-c-text, #111827); font-size: var(--octo-dv-value, 0.875rem); }
.osn-mail-row-ref { margin-left: 8px; font-size: var(--octo-dv-label, 0.8125rem); color: var(--octo-c-muted, #6b7280); }
.osn-mail-row-machine { margin-left: 6px; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-mail-row-date { font-size: var(--octo-dv-label, 0.8125rem); color: var(--octo-c-muted, #6b7280); }
.osn-mail-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--octo-c-border, #d1d5db); background: transparent; margin-right: 4px; }
.osn-mail-dot.is-sent { background: #15803d; border-color: #15803d; }
.osn-mail-dot.is-open { background: #0284c7; border-color: #0284c7; }
.osn-mail-dot.is-click { background: #c2410c; border-color: #c2410c; }
.osn-mail-view { background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); }
.osn-mail-view-subject { margin: 0 0 10px; font-weight: 500; color: var(--octo-c-text, #111827); font-size: 0.875rem; }
.osn-mail-view-proof { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-bottom: 10px; }
.osn-mail-view-frame { width: 100%; height: 60vh; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: #ffffff; }
.osn-mail-all { width: 100%; border-collapse: collapse; }
.osn-mail-all th { text-align: left; padding: 8px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-mail-all td { padding: 8px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }

/* Page "E-Mails" (assets/js/emails-campaigns.js inline styles as classes, same values) */
.osn-emails-card-head { display: flex; justify-content: space-between; align-items: center; }
.octo-card-header h3.osn-emails-title, .osn-emails-card-head h3 { margin: 0; }
.osn-emails-card-body, .octo-card-body.osn-emails-tree-body { padding: 0; }
.osn-emails-visibility { margin: 0; margin-right: 8px; }
.osn-emails-none { text-align: center; padding: 10px; color: #6b7280; font-size: 0.8rem; }
.osn-emails-name { flex: 1; cursor: pointer; }
.osn-emails-actions { display: flex; gap: 6px; align-items: center; }
.osn-emails-label { margin-left: auto; }
.osn-emails-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-emailnew-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 10050; display: flex; align-items: center; justify-content: center; }
.osn-emailnew-modal { background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); width: 920px; max-width: 94%; max-height: 85vh; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; }
.osn-emailnew-modal.is-small { width: 480px; max-width: 92%; display: block; }
.osn-emailnew-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #fafafa); flex-shrink: 0; }
.osn-emailnew-head h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-emailnew-x { background: none; border: none; color: var(--octo-c-muted, #666); cursor: pointer; font-size: 18px; line-height: 1; }
.osn-emailnew-titlerow { display: flex; align-items: flex-end; gap: 12px; padding: 18px 18px 0; flex-shrink: 0; }
.osn-emailnew-inputwrap { flex: 1; }
.osn-emailnew-inputwrap label, .osn-emailnew-body label { display: block; margin: 0 0 6px 0; font-size: 13px; color: var(--octo-c-text, #444); }
.osn-emailnew-body label { margin-bottom: 8px; }
.osn-emailnew-inputwrap input, .osn-emailnew-body input { width: 100%; padding: 10px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.osn-emailnew-inputwrap input.is-invalid { border-color: #dc2626; }
.osn-emailnew-body { padding: 18px; }
.osn-emailnew-create { padding: 10px 20px; background: #e09000; border: none; color: var(--octo-c-accent-text, #1a1200); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; height: 42px; }
.osn-emailnew-templates { padding: 18px; overflow-y: auto; flex: 1; }
.osn-emailnew-label { font-size: 13px; color: var(--octo-c-text, #444); margin-bottom: 12px; font-weight: 500; }
.osn-emailnew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.osn-emailnew-info { grid-column: 1 / -1; text-align: center; padding: 20px; color: #6b7280; font-size: 13px; }
.osn-emailnew-info.is-empty { padding: 30px; }
.osn-emailnew-info.is-empty span { font-size: 0.8rem; color: #6b7280; }
.osn-emailnew-info.is-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-emailnew-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #fafafa); flex-shrink: 0; }
.osn-emailnew-cancel { padding: 10px 16px; background: var(--octo-c-card, #f3f4f6); color: color-mix(in srgb, #111827 var(--octo-ink, 100%), var(--octo-c-text)); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; cursor: pointer; font-size: 13px; }
.osn-tpl-card { border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.osn-tpl-card:hover { border-color: #006B95; box-shadow: 0 2px 8px rgba(0, 107, 149, 0.15); }
.osn-tpl-preview { height: 280px; overflow: hidden; background: var(--octo-c-card, #f9fafb); border-bottom: 1px solid var(--octo-c-border, #f3f4f6); pointer-events: none; position: relative; }
.osn-tpl-preview iframe { border: none; width: 280%; height: 700px; transform: scale(0.35); transform-origin: top left; pointer-events: none; position: absolute; top: 0; left: 0; }
.osn-tpl-nopreview { display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af; font-size: 0.8rem; }
.osn-tpl-info { padding: 10px 12px; }
.osn-tpl-name { font-size: 13px; font-weight: 600; color: var(--octo-c-text, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osn-tpl-count { font-size: 11px; color: #6b7280; margin-top: 2px; }
.osn-tpl-delete { position: absolute; top: 6px; right: 6px; background: color-mix(in srgb, var(--octo-c-card, #ffffff) 90%, transparent); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 4px; width: 24px; height: 24px; display: none; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; font-size: 14px; line-height: 1; }
.osn-tpl-card:hover .osn-tpl-delete { display: flex; }
@media (max-width: 700px) { .osn-emailnew-grid { grid-template-columns: 1fr; } .osn-emailnew-titlerow { flex-wrap: wrap; } }

/* E-mail editor (src/email-editor inline styles as classes, same values; block data stay inline) */
.osn-block-mt { display: block; margin-top: 6px; }
.osn-relative { position: relative; }
.osn-mt8 { margin-top: 8px; }
.osn-mt10 { margin-top: 10px; }
.osn-mb12 { margin-bottom: 12px; }
.osn-ml12 { margin-left: 12px; }
.osn-w100 { width: 100%; }
.osn-inline-hint { font-size: 0.8rem; color: var(--octo-c-muted, #64748b); font-style: italic; padding: 6px 0; }
.osn-html-active { cursor: text; outline: none; }
.osn-ee-orange { background: #e09000; border-color: #e09000; color: var(--octo-c-accent-text, #1a1200); }
.osn-ee-spacer { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #f1f5f9 4px, #f1f5f9 8px); }
.osn-ee-spacer.is-small { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 3px, #f1f5f9 3px, #f1f5f9 6px); }
.osn-ee-hr { border: 0; margin: 0; }
.osn-ee-hr.is-inner { margin: 4px 0; }
.osn-ee-cols { display: grid; }
.osn-ee-col { border: 1px dashed #cbd5e1; border-radius: 4px; padding: 4px; min-height: 40px; background: #fafbfc; }
.osn-ee-col-label { font-size: 0.6875rem; color: #64748b; text-align: center; margin-bottom: 4px; font-weight: 600; }
.osn-ee-col-empty { font-size: 11px; color: #64748b; text-align: center; padding: 8px 0; }
.osn-ee-col-item { margin-bottom: 2px; }
.osn-ee-it { display: flex; }
.osn-ee-shrink0 { flex-shrink: 0; }
.osn-ee-it-img { max-width: 100%; display: block; height: auto; }
.osn-ee-it-placeholder { max-width: 100%; height: 120px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #475569; font-size: 0.8rem; }
.osn-ee-it-text { flex: 1; min-width: 0; }
.osn-ee-it-heading { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: #0f172a; font-family: Arial, Helvetica, sans-serif; }
.osn-ee-it-body { font-size: 13px; color: #333; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; }
.osn-ee-it-btn { display: inline-block; padding: 6px 16px; font-size: 13px; font-weight: 600; text-decoration: none; }
.osn-ee-db { display: flex; overflow: hidden; }
.osn-ee-db-img { object-fit: cover; display: block; }
.osn-ee-db-icon { background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #475569; flex-shrink: 0; }
.osn-ee-db-thumb { flex-shrink: 0; box-sizing: border-box; }
.osn-ee-db-textcell { flex: 1; min-width: 0; box-sizing: border-box; display: flex; align-items: center; padding: 0 16px; }
.osn-ee-db-title { font-family: Arial, Helvetica, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.osn-ee-img-empty { display: inline-block; padding: 40px 20px; background: #f8fafc; border: 1px dashed #cbd5e1; color: #64748b; font-size: 13px; border-radius: 4px; min-width: 200px; text-align: center; }
.osn-ee-html-empty { padding: 20px; background: #f8fafc; border: 1px dashed #cbd5e1; color: #64748b; font-size: 13px; border-radius: 4px; text-align: center; }
.osn-ee-mini { font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; }
.osn-ee-inner-img { max-width: 100%; display: block; height: auto; }
.osn-ee-inner-imgph { color: #475569; text-align: center; padding: 6px; background: #f1f5f9; border-radius: 3px; }
.osn-ee-inner-btnwrap { padding: 4px 0; }
.osn-ee-inner-btn { display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 600; }

/* Settings "E-Mail" and "SMTP" (templates/einstellungen/email.php, smtp.php inline styles as classes, same values) */
.osn-ms-card { max-width: 700px; }
.osn-ms-mt { margin-top: 24px; }
.osn-ms-mt20 { margin-top: 20px; }
.osn-ms-mt16 { margin-top: 16px; }
.osn-ms-mb { margin-bottom: 16px; }
.osn-ms-h2 { padding: 20px 20px 0; margin: 0; }
.osn-ms-desc { padding: 10px 20px; }
.osn-ms-body { padding: 0 20px 20px; }
.osn-ms-group { margin-bottom: 24px; }
.osn-ms-label { font-weight: 600; display: block; margin-bottom: 6px; }
.osn-ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.osn-ms-grid2.is-wide { gap: 20px 40px; margin-bottom: 24px; }
.osn-ms-grid2.is-gap20 { gap: 20px; margin-bottom: 20px; }
.osn-ms-grid2 .osn-ms-group { margin-bottom: 0; }
.osn-ms-w400 { width: 100%; max-width: 400px; }
.osn-ms-w120 { width: 120px; }
.osn-ms-w300 { max-width: 300px; }
.osn-ms-sep { padding-top: 20px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-ms-save { background: #e09000; border-color: #e09000; color: var(--octo-c-accent-text, #1a1200); }
.osn-ms-hint { margin: 4px 0 0; }
.osn-ms-topic { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.osn-ms-logo { margin-bottom: 10px; }
.osn-ms-logo img { max-width: 100%; max-height: 120px; }
.osn-ms-row { display: flex; gap: 8px; align-items: center; }
.osn-ms-row.is-wrap { gap: 12px; flex-wrap: wrap; }
.osn-ms-small { font-size: var(--octo-dv-label, 0.8125rem); padding: 6px 12px; }
.osn-ms-small.is-red { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ms-color { width: 36px; height: 32px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; padding: 2px; cursor: pointer; }
.osn-ms-hex { width: 90px; font-size: var(--octo-dv-value, 0.875rem); padding: 6px 8px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; }
.osn-ms-faint { font-size: var(--octo-dv-label, 0.8125rem); color: #6b7280; }
.osn-ms-max { max-width: 700px; }
.osn-ms-intro { margin-bottom: 16px; }
.osn-ms-icon { width: 22px; text-align: center; }
.osn-ms-state th { text-align: left; font-weight: 600; font-size: 0.875rem; padding: 8px 16px 8px 0; vertical-align: top; width: 180px; }
.osn-ms-state td { font-size: 0.875rem; padding: 8px 0; }
.osn-ms-link { margin-left: 12px; font-size: 0.8125rem; color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ms-code { font-size: 0.8125rem; word-break: break-all; }
.osn-ms-headrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.osn-ms-table, .osn-ms-logtable { border: none; margin: 0; width: 100%; }
.osn-ms-default { margin-left: 8px; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-ms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.osn-ms-check { margin-top: 28px; }
.osn-ms-p { font-size: 0.875rem; color: var(--octo-c-muted, #666); margin-bottom: 16px; }
.osn-ms-logwrap { overflow-x: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-ms-loghead { background: var(--octo-c-card, #f9fafb); }
.osn-ms-logempty { padding: 20px; text-align: center; color: var(--octo-c-faint, #6b7280); font-size: 0.875rem; }
.osn-ms-logerror { background: color-mix(in srgb, #fef2f2 var(--octo-tint, 100%), var(--octo-c-card)); padding: 6px 10px; font-size: 0.8rem; color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
@media (max-width: 700px) { .osn-ms-grid2 { grid-template-columns: 1fr; } }

/* colour swatches: the colour is a data value */
.osn-swatch { background: var(--osn-swatch); }

/* Block "Social Media" (SocialFields.js / BlockPreview.js inline styles as classes, same values) */
.osn-ee-social-empty { display: inline-block; padding: 20px; background: #f8fafc; border: 1px dashed #cbd5e1; color: #475569; font-size: 13px; border-radius: 4px; }
.osn-ee-social-icon { display: inline-block; vertical-align: middle; }
.osn-ee-social-hint { font-size: 13px; color: #64748b; margin: 4px 0 8px; }
.osn-ee-social-off { opacity: 0.5; }
.osn-ee-social-check { width: 14px; height: 14px; accent-color: #006B95; flex-shrink: 0; }
.osn-ee-social-name { font-size: 0.8125rem; font-weight: 500; flex: 1; }
.osn-ee-social-ovhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.osn-ee-social-label { font-weight: 600; font-size: 0.875rem; }
.osn-ee-social-unset { font-size: 0.8rem; color: color-mix(in srgb, #b45309 var(--octo-ink, 100%), var(--octo-c-text)); margin-left: auto; cursor: pointer; background: none; border: none; }
.osn-ee-social-url { width: 100%; font-size: 0.8125rem; padding: 7px 10px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 5px; background: var(--octo-c-input, #fff); color: var(--octo-c-text, #333); box-sizing: border-box; }
/* Settings "E-Mail" > Social Media (email.php inline styles as classes) */
.osn-ms-social-row { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.osn-ms-social-check { width: 15px; height: 15px; accent-color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); cursor: pointer; flex-shrink: 0; }
.osn-ms-social-label { font-weight: 600; width: 110px; flex-shrink: 0; font-size: var(--octo-dv-value, 0.875rem); color: var(--octo-c-text, #333); }
.osn-ms-social-input { flex: 1; min-width: 0; }
.osn-ms-mt12 { margin-top: 12px; }

/* ------------------------------------------------------------------
 * Kampagnen, Flow-Editor, Formular-Builder (today src/flow-editor/*.js inline styles as classes;
 * group colours trigger #e09000, action #006B95, logic #4FA5C9 as in StepCard.js / StepPicker.js)
 * ------------------------------------------------------------------ */
.osn-flow-inner { position: relative; transform: translate(var(--osn-pan-x), var(--osn-pan-y)) scale(var(--osn-zoom)); transform-origin: 0 0;
    width: var(--osn-w); height: var(--osn-h); min-width: var(--osn-w); min-height: var(--osn-h); cursor: grab; }
.osn-grabbing .osn-flow-inner { cursor: grabbing; }
.osn-flow-inner .octo-flow-node { position: absolute; left: var(--osn-x); top: var(--osn-y); width: var(--osn-cw); height: var(--osn-ch); z-index: 10; cursor: grab; }
.osn-flow-inner .octo-flow-node.osn-dragging { z-index: 100; cursor: grabbing; }
.osn-flow-inner .octo-flow-node.osn-locked { cursor: default; }
.osn-flow-inner .octo-flow-node.octo-flow-node-moving { opacity: .6; }
.osn-insert { position: absolute; left: var(--osn-x); top: var(--osn-y); z-index: 15; }
.osn-flow-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }
.octo-flow-zoom-controls.osn-zoom-placed { right: var(--osn-right); bottom: var(--osn-bottom); }
.osn-fg-benchmark .octo-flow-node-accent, .osn-fg-benchmark .octo-flow-settings-accent, .osn-fg-benchmark .octo-flow-picker-group-dot { background: #e09000; }
.osn-fg-action .octo-flow-node-accent, .osn-fg-action .octo-flow-settings-accent, .osn-fg-action .octo-flow-picker-group-dot { background: #006B95; }
.osn-fg-logic .octo-flow-node-accent, .osn-fg-logic .octo-flow-settings-accent, .osn-fg-logic .octo-flow-picker-group-dot { background: #4FA5C9; }
.osn-fg-benchmark .octo-flow-picker-group-header { border-left-color: #e09000; }
.osn-fg-action .octo-flow-picker-group-header { border-left-color: #006B95; }
.osn-fg-logic .octo-flow-picker-group-header { border-left-color: #4FA5C9; }
/* contrast correction: the group colour as text (type line, icons) darkened to 4.5:1, mixed into the theme text */
.osn-fg-benchmark .octo-flow-node-icon, .osn-fg-benchmark .octo-flow-node-type, .osn-fg-benchmark .octo-flow-settings-type, .osn-fg-benchmark .octo-flow-picker-item-icon { color: color-mix(in srgb, #8a5200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-fg-action .octo-flow-node-icon, .osn-fg-action .octo-flow-node-type, .osn-fg-action .octo-flow-settings-type, .osn-fg-action .octo-flow-picker-item-icon { color: color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-fg-logic .octo-flow-node-icon, .osn-fg-logic .octo-flow-node-type, .osn-fg-logic .octo-flow-settings-type, .osn-fg-logic .octo-flow-picker-item-icon { color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-flow-picker-item-icon { background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); }
.osn-has-draft { border-style: dashed !important; }
.osn-flow-kind { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; font-size: 11px; color: var(--octo-c-muted, #64748b); white-space: nowrap; }
.osn-flow-draft-badge { display: inline-block; margin-left: 8px; font-size: 11px; color: color-mix(in srgb, #8a5200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-flow-notice { cursor: pointer; margin: 8px 16px; }
.osn-radio-row, .osn-check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--octo-c-text, #1e293b); }
.osn-check-list { max-height: 180px; overflow: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; padding: 4px 10px; }
.osn-form-error { margin: 10px 0 0; font-size: 13px; color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-flow-settings.osn-settings-wide { width: 80%; }
.osn-step-settings { padding: 16px 24px; }
.osn-step-settings .octo-step-field { margin-bottom: 14px; }
.osn-step-settings .octo-step-field > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--octo-c-text, #1e293b); }
.osn-step-settings .octo-step-field input[type="text"], .osn-step-settings .octo-step-field input[type="number"], .osn-step-settings .octo-step-field input[type="url"],
.osn-step-settings .octo-step-field input[type="date"], .osn-step-settings .octo-step-field input[type="time"], .osn-step-settings .octo-step-field select,
.osn-step-settings .octo-step-field textarea { box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--octo-c-border, #cbd5e1); border-radius: 6px; font-size: 13px; }
.osn-step-settings .full-width { width: 100%; }
.osn-step-settings .description { margin: 4px 0 0; font-size: 0.8rem; color: var(--octo-c-muted, #64748b); }
.osn-two { display: flex; gap: 10px; flex-wrap: wrap; }
.osn-two > div { flex: 1 1 120px; }
.osn-two > div > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.osn-two select, .osn-two input { width: 100%; }
.osn-row-fields { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.osn-row-fields > input, .osn-row-fields > select { flex: 1 1 0; min-width: 0; }
.osn-row-fields > .osn-num { flex: 0 0 80px; }
.osn-branch-box { padding: 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; }
.osn-mono { font-family: monospace; font-size: 0.8rem; }
.osn-webhook-sample { max-height: 220px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; font-size: 0.8rem; color: var(--octo-c-text, #1e293b); }
.osn-ifelse-hint { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--octo-c-muted, #475569); }
.osn-badge-yes { display: inline-block; margin: 0 4px; padding: 1px 8px; border-radius: 4px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 600; }
.osn-badge-no { display: inline-block; margin: 0 4px; padding: 1px 8px; border-radius: 4px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 600; }
.osn-flow-filters { margin-bottom: 10px; }
.osn-fb-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.osn-fb-checks { flex-wrap: wrap; gap: 10px 18px; }
.osn-fb-cond { flex-wrap: wrap; gap: 8px; align-items: center; }
.osn-fb-cond-parts { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.osn-fb-cond-parts input { width: 220px; }
.osn-fb-types { flex-wrap: wrap; gap: 4px; }
.osn-fb-types .description { width: 100%; }
.osn-fb-type { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 0.8rem; min-width: 60px; }
.osn-fb-consent-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.osn-fb-right { justify-content: flex-end; }
.osn-fb-stack { flex-direction: column; align-items: stretch; gap: 4px; }
.osn-fb-divider { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-fb-ok { color: color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-fb-strong { margin: 0 0 8px; font-weight: 600; color: var(--octo-c-text, #003450); }
.osn-fb-flex2 { flex: 2; align-self: flex-end; margin: 0 0 6px; font-size: 11px; }
.osn-fb-design { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-fb-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; margin: 10px 0; }
.osn-fb-color-cell { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.2; color: var(--octo-c-muted, #475569); }
.osn-fb-color-cell input, .osn-fb-color { width: 32px; height: 26px; padding: 2px; cursor: pointer; flex: 0 0 auto; }
.osn-fb-copy { flex-direction: column; align-items: stretch; gap: 4px; }
.osn-fb-drop-end { height: 12px; }
.osn-rte-bar { display: flex; gap: 4px; margin-bottom: 4px; }
.osn-rte-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border: 1px solid #E09000; border-radius: 5px;
    background: linear-gradient(180deg, rgba(224,144,0,0.22), rgba(224,144,0,0.08)); color: color-mix(in srgb, #8a5200 var(--octo-ink, 100%), var(--octo-c-text)); cursor: pointer; font-size: 13px; }
.osn-rte-btn.is-bold { font-weight: 800; }
.osn-rte-btn.is-italic { font-style: italic; }
.osn-rte-btn.is-underline { text-decoration: underline; }
.osn-rte-btn.is-wide { width: auto; padding: 0 10px; font-size: 0.8rem; }
.osn-rte { min-height: 70px; padding: 8px; border: 1px solid var(--octo-c-border, #cbd5e1); border-radius: 6px; font-size: 13px; line-height: 1.5; outline: none; }
.osn-pleb-ratio { margin-top: 12px; }
.osn-pleb-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.osn-pleb-reload { padding: 3px 10px; border: 1px solid var(--octo-c-border, #cbd5e1); border-radius: 4px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #475569); cursor: pointer; font-size: 11px; }
.osn-pleb-preview { width: 100%; height: 520px; overflow: hidden; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; }
.osn-pleb-preview iframe { width: 100%; height: 100%; border: 0; display: block; }
.osn-fb-entries-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.osn-fb-entries { width: 100%; border-collapse: collapse; font-size: 13px; }
.osn-fb-entries th, .osn-fb-entries td { padding: 6px 8px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); text-align: left; vertical-align: top; color: var(--octo-c-text, #1e293b); }
.osn-fb-entry-values { font-size: 0.8rem; }
.osn-flow-actions { display: flex; gap: 6px; align-items: center; }
.osn-flow-name { flex: 1; cursor: pointer; }
.osn-flow-inline { flex: 1; font-size: inherit; padding: 2px 6px; border: 1px solid #006b95; border-radius: 3px; width: 100%; }
.osn-flow-runs { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-flow-runs-title { margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--octo-c-muted, #64748b); }
.osn-flow-run { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.osn-flow-run-name { color: var(--octo-c-text, #1e293b); font-weight: 500; }
.osn-flow-run-status, .osn-flow-run-step { font-size: 0.8rem; color: var(--octo-c-muted, #64748b); }
.osn-flow-run.is-failed .osn-flow-run-status { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
/* contrast corrections of the copied flow-editor.css (measured with seitenpruefung.js, hell and dunkel) */
.octo-form-builder-type-badge { color: color-mix(in srgb, #4b5563 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-form-builder-field-remove { color: var(--octo-c-muted, #64748b); }
.octo-flow-trigger-settings .octo-flow-trigger-switch:not(.is-on) .octo-flow-trigger-switch-text { color: color-mix(in srgb, #1f2937 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-wf-pleb-template-card.active .octo-wf-pleb-template-desc { color: var(--octo-c-text); }

/* data view builder: dragging boxes (DataViewPanel startDrag). The floating copy follows the pointer,
   the columns stay still and a line marks the slot the box lands in. */
.octo-builder-container .octo-box-item { touch-action: none; cursor: grab; }
.osn-dragging, .osn-dragging * { cursor: grabbing !important; user-select: none; }
.osn-drag-float { position: fixed; left: 0; top: 0; z-index: 100001; pointer-events: none; margin: 0; }
.osn-drop-line { position: fixed; left: 0; top: 0; z-index: 100000; height: 3px; border-radius: 2px; pointer-events: none; background: var(--octo-c-accent, #e09000); }
.octo-drop-zone.osn-drop-target, #octo-box-pool.osn-drop-target { outline: 2px dashed var(--octo-c-accent, #e09000); outline-offset: 2px; }

/* task dialog: invitation of the contact and linked files (templates/partials/task-invitation-field.php,
   box-tasks.php, box-emails.php; inline styles of today's markup and task-invitation.js) */
.osn-m-0 { margin: 0; }
.osn-inline-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.octo-modal-content small.osn-notify-help { display: block; margin-top: 4px; margin-left: 24px; }
.octo-modal-content small.osn-notify-help-plain { display: block; margin-top: 4px; }
.osn-notify-warning { margin-top: 8px; margin-left: 24px; padding: 10px 14px; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); border-left: 3px solid #e09000; border-radius: 4px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-invitation-wrap { margin-top: 12px; margin-left: 24px; }
.octo-modal-content label.osn-invitation-label { display: block; margin-bottom: 4px; }
.osn-invitation-status { margin-top: 10px; padding: 8px 12px; border-radius: 4px; font-size: 13px; line-height: 1.5; }
.osn-invitation-status.is-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.osn-invitation-status.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.osn-doclink-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.osn-doclink-h4 { margin: 0 0 8px; }
.octo-doc-row.osn-doc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-doc-actions { margin-left: auto; display: flex; gap: 6px; }
.osn-doclink-actions { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.osn-dir-item-email { padding: 6px 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; cursor: pointer; margin-bottom: 6px; }
.octo-attached-docs .octo-doc-row.osn-mail-doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--octo-c-card, #f9fafb); border-radius: 6px; margin-bottom: 6px; }
.osn-mail-doc-remove { padding: 4px 8px; background: transparent; border: none; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); cursor: pointer; font-size: 14px; }
.osn-mail-doc-remove .dashicons { font-size: 16px; }

/* company list as today (companies.js): number cell and pagination, were inline styles */
.octo-table td.osn-company-number { color: var(--octo-c-faint, #9ca3af); font-size: 0.8rem; }
.osn-company-pages { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; }
.octo-pagination .osn-company-page-btn { padding: 8px 12px; border: 1px solid var(--octo-c-border, #cbd5e1); background: var(--octo-c-card, #fff); cursor: pointer; border-radius: 4px; color: var(--octo-c-text, #111827); }
.osn-company-page-current { padding: 8px 12px; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-radius: 4px; }

/* Primary-deal star: today WordPress swaps the emoji for a 1em image (margin .07em, vertical-align -.1em); same metrics for the text glyph */
.octo-deal-primary-star { display: inline-block; width: 1em; height: 1em; margin: 0 .07em; line-height: 1; vertical-align: -0.1em; overflow: visible; }

/* "Neu" button of the companies list: inline style of today's templates/companies/list.php:83 (fixed brand blue with white text) */
/* contract title carries the help trigger (28px): keep the title line at the height of the company page (24px) */
.octo-detail-title .octo-help-trigger { margin-block: -4px; }
.osn-create-error { display: block; margin-top: 6px; font-size: 13px; color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }

/* roles dialog: navigation accordion with today's values (roles.js renderNavPermissions inline styles) */
.osn-rnav-section { margin-bottom: 10px; }
.octo-modal label.osn-rnav-parent { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--octo-c-card, #f9fafb); border-radius: 4px; font-weight: 500; cursor: pointer; }
.osn-rnav-arrow { margin-left: auto; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-rnav-children { padding-left: 30px; margin-top: 8px; }
.octo-modal label.osn-rnav-child { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.875rem; }

/* ---- Journal box: compact timeline, one line per entry, grouped by day.
   Each category tints a round icon; the text keeps the normal text colour.
   Icon colours are >= 4.5:1 on the card in both schemes (the tint stays above 3:1). */
.octo-jr { padding: 4px 0 8px; max-height: 450px; overflow-y: auto; min-width: 0; }
.octo-jr-day { font-size: 0.8rem; font-weight: 600; color: var(--octo-c-muted); padding: 10px 4px 3px; }
.octo-jr-item:first-child .octo-jr-day { padding-top: 4px; }
.octo-jr-row { --jc: var(--octo-c-muted); display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px; border-radius: 6px; cursor: pointer; min-width: 0; }
.octo-jr-row:hover, .octo-jr-row:focus-visible { background: var(--octo-c-row-hover); }
.octo-jr-row:focus-visible { outline: 2px solid var(--octo-c-link); outline-offset: -2px; }
.octo-jr-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--jc); background: color-mix(in srgb, var(--jc) 14%, var(--octo-c-card)); }
.octo-jr-ico .dashicons { width: 14px; height: 14px; font-size: 14px; line-height: 14px; }
.octo-jr-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: var(--octo-c-text); }
.octo-jr-title { font-weight: 600; }
.octo-jr-desc { color: var(--octo-c-text); }
.octo-jr-who { display: block; font-size: 0.8rem; color: var(--octo-c-muted); }
.octo-jr-time { flex: none; font-size: 0.8rem; color: var(--octo-c-muted); font-variant-numeric: tabular-nums; }
.octo-jr-row.is-open { align-items: flex-start; padding-top: 4px; padding-bottom: 4px; }
.octo-jr-row.is-open .octo-jr-text { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.octo-jr-more { text-align: center; padding: 8px 0 2px; }
.octo-jr-cat-note { --jc: #5b3fc4; }
.octo-jr-cat-task { --jc: #a46900; }
.octo-jr-cat-mail { --jc: #006b95; }
.octo-jr-cat-change { --jc: #0b7a75; }
.octo-jr-cat-form { --jc: #b0287a; }
.octo-jr-cat-money { --jc: #0f7b4f; }
.octo-jr-cat-deal { --jc: #2f55a4; }
.octo-jr-cat-flow { --jc: #a1309f; }
.octo-jr-cat-call { --jc: #5c7a0a; }
.octo-jr-cat-file { --jc: #566170; }
.octo-jr-cat-danger { --jc: #b3261e; }
.octo-jr-cat-system { --jc: var(--octo-c-muted); }
[data-octo-theme="dark"] .octo-jr-cat-note { --jc: #b9a8f5; }
[data-octo-theme="dark"] .octo-jr-cat-task { --jc: #e6a01f; }
[data-octo-theme="dark"] .octo-jr-cat-mail { --jc: #7cc4e2; }
[data-octo-theme="dark"] .octo-jr-cat-change { --jc: #5fd0c8; }
[data-octo-theme="dark"] .octo-jr-cat-form { --jc: #f08cc0; }
[data-octo-theme="dark"] .octo-jr-cat-money { --jc: #4cc38a; }
[data-octo-theme="dark"] .octo-jr-cat-deal { --jc: #9db4f0; }
[data-octo-theme="dark"] .octo-jr-cat-flow { --jc: #de9fdc; }
[data-octo-theme="dark"] .octo-jr-cat-call { --jc: #b5d65a; }
[data-octo-theme="dark"] .octo-jr-cat-file { --jc: #a3b0bd; }
[data-octo-theme="dark"] .octo-jr-cat-danger { --jc: #f0827a; }
.box-journal .octo-box-action.is-active { color: var(--octo-c-link); border-color: var(--octo-c-link); }
.octo-jr-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 8px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--octo-c-border-soft); }
.octo-jr-filter-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; font-weight: 600; color: var(--octo-c-muted); min-width: 0; }
.octo-jr-filter-field:first-child { flex: 1 1 180px; }
.octo-jr-filter-field select, .octo-jr-filter-field input { font-size: 0.8125rem; font-weight: 400; padding: 4px 8px; min-height: 30px; border: 1px solid var(--octo-c-input-border); border-radius: 4px; background: var(--octo-c-input); color: var(--octo-c-text); min-width: 0; }
.octo-jr-filter-field input { width: 140px; }
.octo-jr-filter-actions { display: flex; gap: 6px; margin-left: auto; }

/* Settings "Versand" (F96, K48): status banner, check list, provider tiles, guided steps, DNS table */
.osn-dl-status { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-left-width: 4px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); }
.osn-dl-status.is-ok { border-left-color: #16a34a; background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card)); }
.osn-dl-status.is-warning { border-left-color: #e09000; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); }
.osn-dl-status.is-error { border-left-color: #dc2626; background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); }
.osn-dl-status.is-inactive { border-left-color: var(--octo-c-border, #9ca3af); }
.osn-dl-status-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osn-dl-status-meta { font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }
.osn-dl-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.osn-dl-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.osn-dl-items li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 0.875rem; padding: 4px 2px; }
.osn-dl-mark { width: 18px; text-align: center; font-weight: 700; flex-shrink: 0; }
.osn-dl-items li.is-ok .osn-dl-mark { color: color-mix(in srgb, #16a34a var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-items li.is-warning .osn-dl-mark { color: color-mix(in srgb, #b45309 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-items li.is-error .osn-dl-mark { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-item-label { font-weight: 500; }
.osn-dl-item-detail { color: var(--octo-c-muted, #6b7280); font-size: 0.8125rem; }
.osn-dl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.osn-dl-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 8px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); cursor: pointer; font: inherit; }
.osn-dl-tile:hover { border-color: var(--octo-c-muted, #9ca3af); }
.osn-dl-tile.is-active { border-color: #e09000; box-shadow: 0 0 0 3px rgba(224, 144, 0, 0.15); }
.osn-dl-tile.is-quiet { background: transparent; }
.osn-dl-tile-name { font-weight: 600; font-size: 0.95rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.osn-dl-tile-text { font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }
.osn-dl-tile-loc { font-size: 0.8rem; color: var(--octo-c-faint, #6b7280); }
.osn-dl-tag { display: inline-block; padding: 1px 7px; font-size: 0.6875rem; font-weight: 600; border-radius: 9999px; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-tag.is-in-use { background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-steps { display: grid; gap: 22px; }
.osn-dl-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.osn-dl-step-no { width: 28px; height: 28px; border-radius: 9999px; background: #e09000; color: var(--octo-c-accent-text, #1a1200); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; }
.osn-dl-step.is-done .osn-dl-step-no { background: #15803d; color: var(--octo-c-on-dark, #ffffff); }
.osn-dl-step-body { min-width: 0; }
.osn-dl-step-body h3 { margin: 3px 0 6px; font-size: 0.95rem; font-weight: 600; }
.osn-dl-field { margin: 12px 0; }
.osn-dl-field label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; }
.osn-dl-w300 { width: 100%; max-width: 300px; }
.osn-dl-w260 { width: 100%; max-width: 260px; }
.osn-dl-w400 { width: 100%; max-width: 400px; }
.osn-dl-note { padding: 10px 12px; border-radius: 6px; font-size: 0.8125rem; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-warn { font-size: 0.8125rem; color: color-mix(in srgb, #b45309 var(--octo-ink, 100%), var(--octo-c-text)); margin: 6px 0; }
.osn-dl-table-wrap { overflow-x: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-dl-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.osn-dl-table th { text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); white-space: nowrap; }
.osn-dl-table td { padding: 8px 10px; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); vertical-align: top; }
.osn-dl-table tr:last-child td { border-bottom: 0; }
.osn-dl-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; word-break: break-all; }
.osn-dl-copy { margin-left: 6px; padding: 1px 8px; font-size: 0.6875rem; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 4px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); cursor: pointer; white-space: nowrap; }
.osn-dl-found { white-space: nowrap; font-weight: 600; }
.osn-dl-found.is-ok { color: color-mix(in srgb, #16a34a var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-found.is-missing { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-dl-found.is-mismatch { color: color-mix(in srgb, #b45309 var(--octo-ink, 100%), var(--octo-c-text)); }
@media (max-width: 600px) {
  .osn-dl-table thead { display: none; }
  .osn-dl-table, .osn-dl-table tbody, .osn-dl-table tr, .osn-dl-table td { display: block; }
  .osn-dl-table tr { padding: 8px 10px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
  .osn-dl-table tr:last-child { border-bottom: 0; }
  .osn-dl-table td { border: 0; padding: 2px 0; }
  .osn-dl-table td::before { content: attr(data-label); display: block; font-size: 0.7rem; color: var(--octo-c-muted, #6b7280); }
}
@media (max-width: 600px) { .osn-dl-step { grid-template-columns: 1fr; } .osn-dl-w300, .osn-dl-w260, .osn-dl-w400 { max-width: none; } }

/* ---- Scheduler (M14, F57, F97): calendar page "Termine", the dialogs "Termin" and "Termin vorschlagen", proposals in the tasks box ---- */
.osn-ap-actions { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.osn-ap-actions .octo-btn { width: auto; }
.osn-ap-actions .dashicons { margin-right: 4px; }
.osn-ap-range { padding: 6px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); }
.osn-ap-grid.is-month .osn-ap-day-month { min-height: 140px; }
.osn-ap-grid.is-week .osn-ap-day-week { min-height: 180px; }
.osn-ap-grid.is-day .osn-ap-day-day { min-height: 240px; }
.osn-ap-day-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.osn-ap-empty { color: var(--octo-c-muted, #6b7280); font-size: 0.8rem; }
.octo-appointments-list .octo-day-today { border-color: var(--osn-today, #006899) !important; }
.octo-appointments-list .octo-day-today .octo-day-header { background: color-mix(in srgb, var(--osn-today, #006899) 10%, transparent); }
.octo-appointment-row { display: flex; align-items: center; gap: 2px; }
.octo-appointment-row .octo-appointment-link { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 6px 2px 3px; text-decoration: none; flex: 1; min-width: 0; }
.octo-appointment-row .octo-appointment-title { font-size: 0.8rem; overflow-wrap: break-word; min-width: 0; }
.octo-appointment-row .octo-task-time { display: block; }
.octo-appointment-row .octo-task-time { opacity: 0.7; margin-right: 4px; }
.octo-appointment-item .octo-appointment-link { flex: 1; }
.osn-ap-item { display: flex; align-items: center; gap: 6px; }
.osn-ap-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 9999px; background: var(--osn-dot, #e09000); }
.osn-ap-group { flex: none; font-size: 0.95rem; width: 16px; height: 16px; line-height: 1; color: var(--octo-c-muted, #6b7280); }
.osn-ap-multi { border-left-width: 4px; }
.octo-appointment-link.octo-type-proposal { border-left: 3px dashed var(--octo-c-accent, #e09000); }
.osn-ap-prop-icon { flex: none; font-size: 14px; width: 14px; height: 14px; color: var(--octo-c-muted, #6b7280); }
.osn-ap-sections { margin-top: 16px; }
.osn-ap-suggestions { margin-bottom: 12px; display: grid; gap: 8px; }
.osn-ap-suggestion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); font-size: 0.875rem; }
.osn-ap-suggestion .octo-btn { width: auto; }
.osn-ap-suggestion span:nth-child(2) { flex: 1; min-width: 200px; }
.osn-ap-save-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.osn-ap-save-row .octo-btn { width: auto; }
.osn-ap-band { margin-bottom: 8px; }
.osn-ap-band-name { flex: 0 0 96px; font-size: 0.875rem; color: var(--octo-c-text, #111827); }
.osn-ap-duration { max-width: 140px; }
/* Weekday rows of the business hours: fixed label column, time windows stacked next to it */
.osn-avail { display: flex; flex-direction: column; }
.osn-avail-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-avail-day:first-child { padding-top: 0; }
.osn-avail-label { padding-top: 10px; font-size: 0.875rem; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-avail-ranges { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.osn-avail-range { display: flex; align-items: center; gap: 8px; }
.osn-avail-range .octo-input.osn-avail-time { width: 120px; min-width: 0; }
.osn-avail-sep { font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.osn-avail-remove { padding: 0.25rem 0.5rem; }
.osn-avail-add .dashicons { font-size: 14px; width: 14px; height: 14px; }
@media (max-width: 640px) { .osn-avail-day { grid-template-columns: 1fr; gap: 6px; } .osn-avail-label { padding-top: 0; } .osn-avail-remove, .osn-cal-disconnect { min-height: 44px; } }
.osn-ap-end { display: block; margin: -4px 0 10px; }
.osn-ap-note { display: block; margin-top: 6px; }
.osn-ap-slot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.osn-ap-warn { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ap-clash { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem; background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-proposal-modal .octo-modal-content { max-width: 640px; }
#octo-appointment-modal .octo-modal-content { max-width: 560px; }
#octo-appointment-modal .octo-form-row, #octo-proposal-modal .octo-form-row { display: flex; gap: 12px; }
#octo-appointment-modal .octo-form-col { flex: 1; min-width: 0; }
#octo-appointment-modal .octo-modal-actions .octo-btn, #octo-proposal-modal .octo-modal-actions .octo-btn { width: auto; }
@media (max-width: 600px) {
  #octo-appointment-modal .octo-form-row, #octo-proposal-modal .octo-form-row { flex-direction: column; gap: 0; }
  .osn-ap-actions .octo-btn { flex: 1 1 auto; }
}
.osn-ap-search { position: relative; }
.osn-ap-hits { position: absolute; z-index: 10; left: 0; right: 0; margin-top: 2px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; background: var(--octo-c-card, #ffffff); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-height: 220px; overflow-y: auto; }
.osn-ap-hit { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--octo-c-border, #f3f4f6); background: transparent; color: var(--octo-c-text, #111827); font-size: 13px; text-align: left; cursor: pointer; }
.osn-ap-hit small { color: var(--octo-c-muted, #6b7280); }
.osn-ap-hit:hover { background: var(--octo-c-page, #f3f4f6); }
.osn-ap-proposals { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--octo-c-border, #f3f4f6); }
.osn-ap-proposals:empty { display: none; }
.osn-ap-badge { font-size: 11px; padding: 1px 6px; border-radius: 3px; font-weight: 400; }
.osn-ap-badge.is-pending { background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ap-badge.is-confirmed { background: color-mix(in srgb, #d1fae5 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ap-badge.is-declined { background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ap-badge.is-neutral { background: color-mix(in srgb, #f3f4f6 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #4b5563 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-ap-sent { color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-mr-4 { margin-right: 4px; }
.osn-cal-connected { display: flex; align-items: center; gap: 8px; padding: 10px; margin-bottom: 10px; border-radius: 6px; background: color-mix(in srgb, #ecfdf5 var(--octo-tint, 100%), var(--octo-c-card)); border: 1px solid color-mix(in srgb, #a7f3d0 var(--octo-tint, 100%), var(--octo-c-border)); color: var(--octo-c-text, #111827); }
.osn-cal-connected > .dashicons { color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 20px; width: 20px; height: 20px; }
.osn-cal-connected > div { flex: 1; }
.osn-cal-disconnect { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cal-error { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem; background: color-mix(in srgb, #fee2e2 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-calendar-config-panel .octo-panel-footer.is-hidden { display: none; }
.osn-profile-hours { max-width: 700px; margin-top: 24px; }
.octo-appt-task-delete { flex: none; min-height: 32px; padding: 0.25rem 0.5rem; color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
/* Type scale: tokens --osn-fs-* in native-roles.css (running text 14px, hint 12.8px, never the browser's 16px; controls never 13.3333px) */
.description, p.description, .osn-users-desc, .octo-companies-detail-muted, .octo-mobile-views-empty,
.octo-invoice-page-settings-hint, .octo-invoice-page-settings-hint-3, .octo-pm-intro, .octo-generator-editions, .osn-ms-label,
.octo-email-settings-msg, .osn-ap-range, .osn-check-text, .osn-check-row, .octo-proposal-filter-date-sep { font-size: var(--osn-fs-text); }
.octo-field-hint, .osn-ms-hint { font-size: var(--osn-fs-hint); }
.octo-label.osn-label-lg, .osn-primary-name, .osn-member-name { font-size: 0.875rem; }
.octo-quick-action-btn, .octo-flow-picker-item, .osn-sys-custom, .osn-ms-save, .osn-dl-tile { font-size: 0.8125rem; font-family: inherit; }
.octo-empty-fields-toggle, .octo-flow-move-hint button, .osn-cf-add-field { min-height: 24px; font-family: inherit; font-size: 0.8125rem; }
.octo-email-editor-gear { font-size: 0.875rem; }
.octo-rights-all { padding: 4px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); font-family: inherit; font-size: 0.8125rem; line-height: 1.3; cursor: pointer; }
.octo-flow-zoom-level { padding: 2px 6px; font-family: inherit; font-size: 0.8125rem; }
.osn-ss-level select { font-family: inherit; font-size: 0.875rem; }
.osn-dl-status-main strong, .octo-form-group.full-width > label, .octo-proposal-empty-state p, .osn-builder-empty p, .octo-card.osn-builder-empty > p, .octo-pm-row span, .osn-check-row.osn-check-row-top { font-size: 0.875rem; }
.octo-inv-stat-label select.octo-invoice-list-field { min-height: 24px; font-size: 0.8125rem; }

/* Tracking: running notes inside cards and the settings checkbox label */
.osn-tracking-note { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--octo-c-muted, #6b7280); }
.octo-tracking-checkbox-label { font-size: 0.875rem; }

/* Reports: SVG charts (series colours of today's report page) */
.osn-chart { width: 100%; }
.osn-chart svg { display: block; max-width: 100%; }
.osn-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 0.8rem; color: var(--octo-c-muted, #666); padding: 0 0 8px; }
.osn-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.osn-chart-legend-box { width: 40px; height: 12px; display: inline-block; border: 2px solid transparent; }
.osn-chart-legend-box.is-outline { background: transparent !important; }
.osn-chart-grid { stroke: var(--octo-c-border, #e5e7eb); stroke-width: 1; }
.osn-chart-tick { fill: var(--octo-c-muted, #666); font-size: 11px; }
.osn-chart-line { stroke-width: 2; }
.osn-chart-point { stroke-width: 1; }
.osn-chart-area { stroke: none; opacity: 0.12; }
.osn-chart-green { fill: #22c55e; stroke: #22c55e; background: #22c55e; border-color: #22c55e; }
.osn-chart-blue { fill: #003450; stroke: #003450; background: #003450; border-color: #003450; }
.osn-chart-yellow { fill: #eab308; stroke: #eab308; background: #eab308; border-color: #eab308; }
.osn-chart-orange { fill: #f97316; stroke: #f97316; background: #f97316; border-color: #f97316; }
.osn-chart-red { fill: #800000; stroke: #800000; background: #800000; border-color: #800000; }
.osn-chart-purple { fill: #6d28d9; stroke: #6d28d9; background: #6d28d9; border-color: #6d28d9; }
.osn-chart-p0 { fill: #e09000; background: #e09000; }
.osn-chart-p1 { fill: #003450; background: #003450; }
.osn-chart-p2 { fill: #22c55e; background: #22c55e; }
.osn-chart-p3 { fill: #6d28d9; background: #6d28d9; }
.osn-chart-p4 { fill: #eab308; background: #eab308; }
.osn-chart-p5 { fill: #0ea5e9; background: #0ea5e9; }
.osn-chart-p6 { fill: #800000; background: #800000; }
.osn-chart-p7 { fill: #64748b; background: #64748b; }
.osn-chart-slice { stroke: var(--octo-c-card, #fff); stroke-width: 2; }
.osn-chart-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.osn-chart-legend-side { flex-direction: column; align-items: flex-start; justify-content: center; padding: 0; }
.osn-chart-legend-side .osn-chart-legend-box, .osn-chart-p0.osn-chart-legend-box { width: 14px; }
.osn-chart-amber { fill: #e09000; stroke: #e09000; background: #e09000; border-color: #e09000; }
.osn-chart-line.osn-chart-green, .osn-chart-green .osn-chart-line { stroke: #22c55e; }
.osn-chart-green.osn-chart-point, .osn-chart-green .osn-chart-point { fill: #22c55e; }
.osn-chart-blue .osn-chart-line { stroke: #003450; }
.osn-chart-blue .osn-chart-point { fill: #003450; }
g.osn-chart-green, g.osn-chart-blue, g.osn-chart-amber { fill: none; stroke: none; background: none; }
g.osn-chart-green .osn-chart-line { stroke: #22c55e; }
g.osn-chart-green .osn-chart-point, g.osn-chart-green .osn-chart-area { fill: #22c55e; }
g.osn-chart-blue .osn-chart-line { stroke: #003450; }
g.osn-chart-blue .osn-chart-point, g.osn-chart-blue .osn-chart-area { fill: #003450; }
g.osn-chart-amber .osn-chart-line { stroke: #e09000; }
g.osn-chart-amber .osn-chart-point, g.osn-chart-amber .osn-chart-area { fill: #e09000; }

/* Settings > Cron: the notes of the ranking card (inline styles of today's template) */
.osn-cron-card { margin-top: 20px; }
.osn-cron-note { margin-top: 2px; font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }
.osn-cron-warning { margin-top: 5px; font-size: 0.875rem; font-weight: 600; color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cron-result { margin-top: 20px; padding: 15px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #f3f4f6); }
.osn-cron-h { margin-top: 25px; font-size: 0.95rem; font-weight: 600; color: var(--octo-c-text, #1f2937); }
.osn-cron-title { padding: 20px 20px 0; margin: 0; font-size: 1.25rem; font-weight: 600; }
.osn-cron-muted { margin-top: 0; font-size: 0.95rem; color: var(--octo-c-muted, #4b5563); }
.osn-cron-muted-3 { margin-top: 5px; font-size: 0.875rem; color: var(--octo-c-muted, #4b5563); }
.osn-cron-list { margin-top: 10px; font-size: 0.875rem; color: var(--octo-c-muted, #4b5563); padding-left: 20px; }
.osn-cron-manual { margin-top: 30px; border-top: 1px solid var(--octo-c-border, #e5e7eb); padding-top: 20px; }
.osn-cron-manual-h { margin-top: 0; font-size: 0.95rem; font-weight: 600; color: var(--octo-c-text, #1f2937); }
.osn-cron-result-h { margin: 0 0 10px 0; font-size: 14px; }
.osn-cron-pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-family: monospace; font-size: 0.8rem; color: var(--octo-c-text, #374151); }
.osn-report-icon { font-size: 14px; width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; }

/* page intro line: also on pages that do not load the mail settings sheet (cron) */
.octo-page-description { font-size: 0.875rem; color: var(--octo-c-muted, #6b7280); }

/* --- report tiles (dashboard, Auswertung, Berichte): the frame of today's cards without inline styles --- */
.osn-card-head { display: flex; justify-content: space-between; align-items: center; }
.osn-card-title { display: flex; align-items: center; gap: 0.5rem; }
.osn-view-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 11px; line-height: 1; height: 20px; border-radius: 4px; text-decoration: none; width: auto; font-weight: normal; flex-shrink: 0; margin-left: auto; color: var(--octo-c-muted, #6b7280); background: transparent; border: 1px solid var(--octo-c-border, #cbd5e1); }
.osn-view-toggle .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }
.osn-tile-number { padding: 0.5rem 1rem 1rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.osn-tile-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--octo-c-text, #111827); }
.osn-tile-link { text-decoration: none; }
.osn-tile-link:hover .osn-tile-value { text-decoration: underline; }
.osn-tile-note { flex-basis: 100%; margin: 0; }
.osn-tile-error { padding: 0 1rem 1rem; }
.osn-delta { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-delta.is-good { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-delta.is-bad { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-estimate { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--octo-c-muted, #6b7280); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 4px; padding: 1px 6px; }
.osn-team-scroll { max-height: 250px; overflow-y: auto; }
.osn-pinned-reports { margin-top: 2rem; }
.osn-pinned { margin-bottom: 2rem; }
.osn-pinned-head { border-bottom: 1px solid var(--octo-c-border); padding-bottom: 1rem; margin-bottom: 1rem; }
.osn-analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.osn-analysis-note { padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--octo-c-border); background: var(--octo-c-card-head, #f9fafb); }
.osn-analysis-note h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; }
.osn-analysis-note p { margin: 0; font-size: 0.875rem; }
.osn-analysis-note.is-error { border-left-color: #ef4444; }
.osn-analysis-note.is-warn { border-left-color: #f59e0b; }
@media (max-width: 480px) { .osn-analysis-grid { grid-template-columns: 1fr; } }

/* profile card "Dashboard-Anzeige": the padding and the foot of today's inline styles */
.osn-profile-pad { padding: 0 24px 24px; }
.osn-profile-hint { margin: 12px 0 0; color: var(--octo-c-faint, #9ca3af); font-size: 0.8rem; }
.osn-profile-foot { padding: 16px 24px; border-top: 1px solid var(--octo-c-border, #f3f4f6); display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.osn-profile-msg { font-size: 0.875rem; }
.osn-profile-msg.is-ok { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-profile-msg.is-bad { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-widget-icon { color: var(--octo-c-accent, #006b95); }

/* Analysis page: the inline styles of overview.php and reports.js as classes */
.osn-template-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; }
.osn-icon-btn { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; }
.osn-icon-btn .dashicons { margin: 0; }
.osn-custom-range { margin-top: 0.5rem; }
.osn-full { width: 100%; }
.osn-mt { margin-top: 0.5rem; }
.osn-no-margin { margin: 0; }
.osn-topbar-actions { display: flex; gap: 0.75rem; align-items: center; }
.osn-export { position: relative; display: inline-block; }
.osn-caret { font-size: 14px; margin-left: 4px; }
.osn-export-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--octo-c-card, #fff); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 200px; }
.osn-export-option { display: block; width: 100%; padding: 10px 16px; text-align: left; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--octo-c-text, #111827); }
.osn-export-option:hover { background: var(--octo-c-card-head, #f3f4f6); }
.osn-export-option .dashicons { margin-right: 8px; }
.osn-export-sep { border-top: 1px solid var(--octo-c-border, #f3f4f6); }
.osn-analysis-section { margin-bottom: 1.5rem; }
.osn-analysis-empty { padding: 1rem; text-align: center; color: var(--octo-c-muted); }
.osn-compare-box { margin-bottom: 2rem; padding: 1.5rem; background: var(--octo-c-card); border-radius: 12px; border: 1px solid var(--octo-c-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.osn-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 1.5rem; }
.osn-compare-card { background: var(--octo-c-card); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--octo-c-page); }
.osn-total-box { margin-bottom: 2rem; padding: 1.5rem; background: var(--octo-c-card-head); border-radius: 12px; }
.osn-total-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; }
.osn-hint { font-size: 0.875rem; color: var(--octo-c-muted); margin: 0.25rem 0 0 0; }
@media (max-width: 700px) { .osn-compare-grid, .osn-total-grid { grid-template-columns: 1fr; } }
@media print { .octo-sidebar, .octo-mobile-header, .octo-reports-topbar .osn-topbar-actions, .octo-reports-filterbar, .octo-pagination { display: none !important; } }
.octo-reports-stat-value a { color: inherit; text-decoration: none; }
.octo-reports-stat-value a:hover { text-decoration: underline; }
/* pagination of the Auswertung (today unstyled browser buttons): the metrics of the company list, at the scale of the styled pages */
.octo-reports .octo-pagination .osn-company-page-btn, .octo-reports .osn-company-page-current { font-size: 14px; line-height: 1.2; }
/* chip of a drilldown from a report number (B8): what the list is narrowed to, with the way back */
.osn-drill-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; padding: 2px 4px 2px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 999px; background: var(--octo-c-card-head, #f9fafb); color: var(--octo-c-muted, #6b7280); font-size: 0.8rem; vertical-align: middle; }
.osn-drill-chip .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }
.osn-drill-chip a { display: inline-flex; color: inherit; text-decoration: none; }
.osn-hub-export { display: flex; gap: 0.5rem; justify-content: flex-end; margin: -0.5rem 0 1rem; }
.osn-file-link { margin-left: 12px; }
.osn-recipient-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; padding: 8px 12px; display: grid; gap: 6px; }
/* workflow cockpit of the dashboard (the inline styles of dashboard.php) */
.osn-span-all { grid-column: 1 / -1; }
.osn-cockpit { padding: 0 16px 16px; }
.osn-cockpit-icon { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-open-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; line-height: 1; height: 20px; border-radius: 4px; text-decoration: none; color: var(--octo-c-muted, #6b7280); background: transparent; border: 1px solid var(--octo-c-border, #cbd5e1); flex-shrink: 0; }
.osn-open-link .dashicons { font-size: 12px; width: 12px; height: 12px; line-height: 12px; }
.osn-cockpit-counters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.osn-cockpit-counter { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; background: color-mix(in srgb, #ecfdf5 var(--octo-tint, 100%), var(--octo-c-card)); border: 1px solid color-mix(in srgb, #a7f3d0 var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cockpit-counter .dashicons { font-size: 14px; width: 14px; height: 14px; color: color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cockpit-head { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.osn-cockpit-head .dashicons { font-size: 14px; width: 14px; height: 14px; color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cockpit-head-runs { margin-top: 16px; }
.osn-cockpit-head-runs .dashicons { color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cockpit-tasks { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-cockpit-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.osn-cockpit-task-main { flex: 1; min-width: 0; }
.osn-cockpit-task-title { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osn-cockpit-due { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }
.osn-cockpit-due.is-overdue { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-cockpit-open { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 0.8rem; padding: 4px 10px; white-space: nowrap; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-radius: 4px; text-decoration: none; font-weight: 600; }
.osn-cockpit-none { padding: 0.25rem 0 0.5rem; }
.osn-cockpit-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.osn-cockpit-run { display: block; text-decoration: none; color: inherit; padding: 10px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #fafbfc); }
.osn-cockpit-run-title { font-weight: 600; font-size: 0.8rem; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osn-cockpit-run-step { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-bottom: 6px; }
.osn-cockpit-run-bar { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: var(--octo-c-muted, #6b7280); }
.osn-cockpit-run-track { flex: 1; height: 4px; background: color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card)); border-radius: 2px; overflow: hidden; }
.osn-cockpit-run-fill { height: 100%; background: #006b95; border-radius: 2px; }
.osn-cockpit-run-by { font-size: 0.6875rem; color: var(--octo-c-muted, #6b7280); margin-top: 4px; }

/* sign-in: captcha, trust checkbox and method links; profile: sign-in security */
.osn-login-captcha { margin-bottom: 16px; min-height: 0; }
.osn-login-trust { margin-top: 12px; }
.osn-login-methods { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.osn-security h3 { font-size: 0.95rem; margin: 24px 0 8px; }
.osn-security-list { list-style: none; margin: 8px 0; padding: 0; }
.osn-security-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--octo-c-border); }
.osn-security-codes code { display: block; font-size: 0.95rem; letter-spacing: 0.05em; word-spacing: 0.5em; margin: 8px 0 16px; word-break: break-word; }
.osn-security-ask { margin: 16px 0; padding: 12px; border: 1px solid var(--octo-c-border); border-radius: 0.375rem; }
.osn-security .octo-field-hint, .osn-security .description { display: block; }
.osn-hidden { display: none; }

.octo-mobile-status-chip.octo-status-chip { color: #111827; }

.osn-footer-row--2 { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.octo-support-icon { background: none; border: none; padding: 0; cursor: pointer; color: var(--octo-c-accent, #e09000); transition: color 0.2s; display: block; }
.octo-support-icon svg { display: inline; }
.octo-support-icon:hover { color: var(--octo-c-accent, #e09000); filter: brightness(1.15); }
.osn-support-cc { max-height: 132px; overflow-y: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; padding: 8px 10px; background: var(--octo-c-input, #ffffff); }
.osn-transfer-counts { margin: 8px 0 16px; padding-left: 18px; }
.osn-sr-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 16px; }
.osn-sr-targets { height: 180px; }
@media (max-width: 700px) { .osn-sr-copy { grid-template-columns: 1fr; } }
[data-octo-theme="dark"] body:not(.octo-invoices) .octo-inv-status.sent, [data-octo-theme="dark"] body:not(.octo-invoices) .octo-inv-status.finalized { color: var(--octo-c-text, #e6edf3); }

/* ---- Administrator area (R36, settings/AdministratorPage.tsx): licence rows, switch, chips. Colours are role tokens or status pairs. ---- */
.osn-admin-chip { display: inline-block; padding: 2px 10px; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--osn-admin-chip, #6b7280) 45%, #ffffff); background: color-mix(in srgb, var(--osn-admin-chip, #6b7280) 22%, #ffffff); color: #111827; font-size: var(--osn-fs-hint); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.osn-admin-chip.is-all { --osn-admin-chip: #22c55e; }
.osn-admin-chip.is-some { --osn-admin-chip: #f59e0b; }
.osn-admin-chip.is-none { --osn-admin-chip: #6b7280; }
.osn-admin-chip.is-platform { --osn-admin-chip: #e09000; margin-left: 8px; }
.osn-admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.osn-admin-bar .octo-check-row { margin: 0; }
.osn-admin-bar .octo-input.osn-admin-search { flex: 1 1 100%; width: 100%; margin: 0; }
.osn-admin-count { color: var(--octo-c-muted); font-size: var(--osn-fs-hint); }
.osn-admin-gap { flex: 1; }
.osn-admin-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.osn-admin-area { border: 1px solid var(--octo-c-border); border-radius: 6px; background: var(--osn-select-idle); }
.osn-admin-area.is-on { background: var(--osn-select-bg); border-color: var(--osn-select-border); }
.osn-admin-area-head { display: flex; align-items: center; gap: 12px; padding: 6px 14px; }
.osn-admin-area-name { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--octo-c-text); font: inherit; text-align: left; }
button.osn-admin-group-header { cursor: pointer; }
button.osn-admin-group-header:hover { background: var(--osn-select-hover); }
.osn-admin-group-header:focus-visible { outline: 2px solid var(--octo-c-accent); outline-offset: 2px; }
.osn-admin-area-title { flex: 1; min-width: 0; }
.osn-admin-area-title strong { font-size: var(--osn-fs-sub); }
.osn-admin-hint { margin-left: 8px; color: var(--octo-c-muted); font-size: var(--osn-fs-hint); font-weight: 400; }
.osn-admin-caret { color: var(--octo-c-muted); font-size: 18px; width: 18px; height: 18px; }
.osn-admin-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; padding: 12px 14px 14px 62px; border-top: 1px solid var(--octo-c-border); }
.osn-admin-children .octo-check-row { margin: 0; }
@media (max-width: 600px) {
    .osn-admin-area-name { flex-wrap: wrap; row-gap: 6px; }
    .osn-admin-area-title { flex: 1 1 120px; }
    .osn-admin-children { padding-left: 14px; grid-template-columns: minmax(0, 1fr); }
}

/* switch: the track carries the state (role colours; the knob is the card surface, both flip with the scheme) */
.osn-switch { position: relative; display: inline-block; flex: none; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.osn-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.osn-switch-track { position: absolute; inset: 0; border-radius: 9999px; background: var(--octo-c-muted); transition: background 0.15s; pointer-events: none; }
.osn-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--octo-c-card); transition: transform 0.15s; }
.osn-switch input:checked + .osn-switch-track { background: var(--octo-c-link); }
.osn-switch input:checked + .osn-switch-track::after { transform: translateX(18px); }
.osn-switch input:focus-visible + .osn-switch-track { outline: 2px solid var(--octo-c-accent); outline-offset: 2px; }
.osn-switch input:disabled { cursor: not-allowed; }
.osn-switch input:disabled + .osn-switch-track { opacity: 0.55; }

/* Administrator area, stage 2: cards "Users", "Company admin rights", "Contact boxes and field groups" */
.osn-admin-chip.is-core { --osn-admin-chip: #6b7280; margin-left: 8px; }
/* checkbox, label and the chip "Module"/"Core" stay on one line; the label text wraps, never the chip */
.osn-admin-children .octo-checkbox-label > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.osn-admin-children .osn-admin-child-text { min-width: 0; overflow-wrap: anywhere; }
.osn-admin-children .osn-admin-chip, .osn-admin-children .osn-admin-hint { flex: none; margin-left: 0; }
.osn-admin-card .osn-admin-group-title { margin: 24px 0 12px; font-size: var(--osn-fs-sub); font-weight: 600; color: var(--octo-c-text); }
.osn-admin-card .osn-admin-group-title:first-of-type { margin-top: 4px; }
.osn-admin-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; }
.osn-admin-checks .octo-check-row { margin: 0; }
.osn-admin-fieldgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 24px; }
.osn-admin-fieldgroup, .osn-admin-boxgroup { padding: 12px 14px 14px; border: 1px solid var(--octo-c-border); border-radius: 6px; background: var(--osn-select-idle); }
.osn-admin-fieldgroup h4, .osn-admin-boxgroup h4 { margin: 0 0 12px; font-size: var(--osn-fs-hint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--octo-c-muted); }
.osn-admin-fieldgroup .octo-check-row { margin: 0 0 12px; }
.osn-admin-fieldgroup .octo-check-row:last-child { margin-bottom: 0; }
.osn-admin-boxblock + .osn-admin-boxblock { margin-top: 8px; }
.osn-admin-boxblock .octo-field-hint { margin: 0 0 12px; }
.osn-admin-boxgroup { margin-bottom: 12px; }
.osn-admin-boxgroup .osn-admin-checks { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.osn-admin-footnote { margin: 20px 0 0; }
.osn-admin-users { display: grid; gap: 16px; max-width: 520px; }
.osn-admin-switch-row { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: 400; }
.osn-admin-users .octo-form-group { margin: 0; }
.osn-admin-users .octo-input.osn-admin-limit { width: 160px; max-width: 100%; }
.osn-admin-usage { margin: 0; padding: 10px 16px; border: 1px solid var(--osn-select-border); border-radius: 6px; background: var(--osn-select-bg); color: var(--octo-c-text); }
.osn-admin-card .octo-field-hint { margin: 0 0 16px; }

/* Screenshots in the help dialog (resources/help/*.html, files in public/help/img) */
.octo-help-content img.octo-help-shot { display: block; max-width: 100%; height: auto; margin: 12px 0 16px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 8px; }
/*
 * Design system roles of the native build: the ONE place for button roles and the type scale.
 * Loaded last on every page entry (after native.css). Hex colours live here and in the token files only.
 * Rules: developer/design-system-dev.html (buttons, colours), developer/abnahme.html (measure, do not count).
 *
 * Buttons: <button class="octo-btn octo-btn--ROLE [octo-btn--sm]">; ROLE is one of
 *   primary    the one main action of a card (fixed accent surface, dark text in both schemes)
 *   secondary  everything accompanying (tinted glass blue)
 *   danger     delete / remove (tinted glass red)
 *   ghost      text-like action without a surface
 *   icon       icon-only button without a surface (needs title / aria-label)
 *   success    start / activate actions (tinted glass green, as the campaign starter)
 *   provider   connect button of a third party (Google, Microsoft): fixed blue surface, fixed white text
 * A page never defines its own button colours.
 */
:root {
	/* ---- type scale (page title, card heading, sub heading, label, text/help, hint) ---- */
	--osn-fs-title: 1.5rem;
	--osn-fs-card: 0.95rem;
	--osn-fs-sub: 0.875rem;
	--osn-fs-label: 0.875rem;
	--osn-fs-text: 0.875rem;
	--osn-fs-hint: 0.8rem;
	--osn-fs-button: 0.8125rem;
	--osn-fs-badge: 0.6875rem;

	/* ---- button role tokens ---- */
	--osn-btn-primary-bg: var(--octo-c-accent, #e09000);
	--osn-btn-primary-bg-hover: #c87f00;
	--osn-btn-primary-text: var(--octo-c-accent-text, #1a1200);
	--osn-btn-quiet-bg: rgba(0, 107, 149, 0.08);
	--osn-btn-quiet-bg-hover: rgba(0, 107, 149, 0.15);
	--osn-btn-quiet-border: rgba(0, 107, 149, 0.25);
	--osn-btn-quiet-border-hover: rgba(0, 107, 149, 0.4);
	--osn-btn-quiet-text: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text));
	--osn-btn-quiet-text-hover: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
	--osn-btn-danger-bg: rgba(128, 0, 0, 0.06);
	--osn-btn-danger-bg-hover: rgba(128, 0, 0, 0.12);
	--osn-btn-danger-border: rgba(128, 0, 0, 0.3);
	--osn-btn-danger-text: color-mix(in srgb, #800000 var(--octo-ink, 100%), var(--octo-c-text));
	--osn-btn-danger-text-hover: color-mix(in srgb, #660000 var(--octo-ink, 100%), var(--octo-c-text));
	--osn-btn-success-bg: rgba(16, 185, 129, 0.08);
	--osn-btn-success-bg-hover: rgba(16, 185, 129, 0.16);
	--osn-btn-success-border: rgba(16, 185, 129, 0.35);
	--osn-btn-success-text: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text));
	--osn-btn-provider-bg: #006b95;
	--osn-btn-provider-bg-hover: #005a80;
	--osn-btn-provider-border: #005a80;
	--osn-btn-provider-text: var(--octo-c-on-dark, #ffffff);
}

/* ---- base: one size for every button, whichever page stylesheet is loaded ---- */
:root .octo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: auto;
	min-height: 36px;
	padding: 7px 14px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--osn-fs-button);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
:root .octo-btn:disabled,
:root .octo-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
:root .octo-btn:focus-visible { outline: 2px solid #e09000; outline-offset: 2px; }
:root .octo-btn.octo-btn--sm { min-height: 30px; padding: 4px 10px; font-size: var(--osn-fs-hint); }
:root .octo-btn.octo-btn--block { width: 100%; }

/* ---- roles ---- */
:root .octo-btn.octo-btn--primary {
	background: var(--osn-btn-primary-bg);
	border-color: var(--osn-btn-primary-bg);
	color: var(--osn-btn-primary-text);
}
:root .octo-btn.octo-btn--primary:hover:not(:disabled) {
	background: var(--osn-btn-primary-bg-hover);
	border-color: var(--osn-btn-primary-bg-hover);
	color: var(--osn-btn-primary-text);
}
:root .octo-btn.octo-btn--secondary {
	background: var(--osn-btn-quiet-bg);
	border-color: var(--osn-btn-quiet-border);
	color: var(--osn-btn-quiet-text);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
:root .octo-btn.octo-btn--secondary:hover:not(:disabled) {
	background: var(--osn-btn-quiet-bg-hover);
	border-color: var(--osn-btn-quiet-border-hover);
	color: var(--osn-btn-quiet-text-hover);
}
:root .octo-btn.octo-btn--danger {
	background: var(--osn-btn-danger-bg);
	border-color: var(--osn-btn-danger-border);
	color: var(--osn-btn-danger-text);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
:root .octo-btn.octo-btn--danger:hover:not(:disabled) {
	background: var(--osn-btn-danger-bg-hover);
	border-color: var(--osn-btn-danger-text);
	color: var(--osn-btn-danger-text-hover);
}
:root .octo-btn.octo-btn--success {
	background: var(--osn-btn-success-bg);
	border-color: var(--osn-btn-success-border);
	color: var(--osn-btn-success-text);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
:root .octo-btn.octo-btn--success:hover:not(:disabled) { background: var(--osn-btn-success-bg-hover); border-color: var(--osn-btn-success-text); }
:root .octo-btn.octo-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--octo-c-link, #006b95);
	padding-left: 6px;
	padding-right: 6px;
}
:root .octo-btn.octo-btn--ghost:hover:not(:disabled) { background: var(--osn-btn-quiet-bg); }
:root .octo-btn.octo-btn--icon {
	min-height: 28px;
	min-width: 28px;
	padding: 4px;
	background: transparent;
	border-color: transparent;
	color: var(--octo-c-muted, #6b7280);
}
:root .octo-btn.octo-btn--icon:hover:not(:disabled) { background: var(--osn-btn-quiet-bg); color: var(--osn-btn-quiet-text); }
:root .octo-btn.octo-btn--icon.octo-btn--danger { color: var(--osn-btn-danger-text); }
:root .octo-btn.octo-btn--icon.octo-btn--danger:hover:not(:disabled) { background: var(--osn-btn-danger-bg-hover); }
:root .octo-btn.octo-btn--provider {
	background: var(--osn-btn-provider-bg);
	border-color: var(--osn-btn-provider-border);
	color: var(--osn-btn-provider-text);
}
:root .octo-btn.octo-btn--provider:hover:not(:disabled) {
	background: var(--osn-btn-provider-bg-hover);
	border-color: var(--osn-btn-provider-bg-hover);
	color: var(--osn-btn-provider-text);
}
:root .octo-btn .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 1; color: inherit; flex-shrink: 0; }

/* ---- type scale: zero specificity on purpose, explicit page rules stay in charge where they follow the scale ---- */
:where(.octo-content h1) { font-size: var(--osn-fs-title); }
:where(.octo-content h2) { font-size: var(--osn-fs-card); }
:where(.octo-content h3) { font-size: var(--osn-fs-sub); font-weight: 600; }
:where(.octo-content label, .octo-content legend, .octo-content strong, .octo-content th) { font-size: var(--osn-fs-label); }
:where(.octo-content .description, .octo-content .octo-page-description) { font-size: var(--osn-fs-text); }
:where(.octo-content .octo-field-hint) { font-size: var(--osn-fs-hint); }
:where(.octo-content select, .octo-content input:not([type="checkbox"]):not([type="radio"]), .octo-content textarea) { font-size: var(--osn-fs-label); font-family: inherit; }

/* ---- shared parts of the settings pages (settings/parts.tsx) ---- */
.octo-content .octo-smtp-config + .octo-smtp-config { margin-top: 20px; }
.octo-content .octo-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.octo-content .octo-smtp-form-grid .octo-form-actions { grid-column: 1 / -1; }
.octo-content .octo-email-settings-msg.is-warning { display: block; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.5); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-content .octo-email-settings-msg.is-info { display: block; background: rgba(0, 107, 149, 0.08); border: 1px solid rgba(0, 107, 149, 0.3); color: var(--octo-c-text, #111827); }
.octo-content .octo-card-body > .octo-email-settings-msg:first-child { margin-top: 0; }
.octo-content .octo-data-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.octo-content .octo-data-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid rgba(0, 107, 149, 0.2); border-radius: 6px; background: rgba(0, 107, 149, 0.05); font-size: var(--osn-fs-text); }
.octo-content .octo-data-row-text small { display: block; color: var(--octo-c-muted, #6b7280); font-size: var(--osn-fs-hint); }
.octo-content .octo-data-row-actions { display: inline-flex; gap: 8px; }
.octo-content .octo-field-value { margin: 0; font-size: var(--osn-fs-label); color: var(--octo-c-text, #111827); }
.octo-content .octo-page-header { margin-bottom: 12px; }
.octo-content .octo-settings-smtp-hint { font-size: var(--osn-fs-hint); }
.octo-content .octo-card-body > p.octo-field-hint { margin: 0 0 16px; }
.octo-content .octo-card-body > .octo-email-settings-msg { margin-bottom: 16px; }
.octo-content .octo-card-body > .octo-email-settings-msg + .octo-email-settings-msg { margin-top: 0; }
.octo-content .octo-form-group .octo-email-settings-msg { margin-top: 12px; }

/* ---- buttons on a fixed dark surface (custom-field category header): a role on a FIXED surface must be a fixed pair ---- */
.osn-cf-group-header .octo-btn.octo-btn--secondary,
.osn-cf-group-header .octo-btn.octo-btn--icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: var(--octo-c-on-dark, #ffffff); }
.osn-cf-group-header .octo-btn.octo-btn--secondary:hover:not(:disabled),
.osn-cf-group-header .octo-btn.octo-btn--icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); color: var(--octo-c-on-dark, #ffffff); }
.osn-cf-group-header .octo-btn.octo-btn--danger { background: rgba(255, 255, 255, 0.08); border-color: rgba(252, 165, 165, 0.6); color: #fca5a5; }
.octo-content > .octo-card + .octo-card { margin-top: 20px; }

/* ---- chips: glass, as the quick filters and status chips of today (tinted surface, hairline border); selected = tinted accent ---- */
.octo-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.octo-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--osn-btn-quiet-border); border-radius: 9999px; background: var(--osn-btn-quiet-bg); color: var(--osn-btn-quiet-text); font-size: var(--osn-fs-hint); font-weight: 500; line-height: 1.4; cursor: pointer; user-select: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.15s, border-color 0.15s; }
.octo-chip:hover { background: var(--osn-btn-quiet-bg-hover); border-color: var(--osn-btn-quiet-border-hover); }
.octo-chip.is-selected { background: color-mix(in srgb, #e09000 var(--octo-tint, 100%), transparent 82%); border-color: rgba(224, 144, 0, 0.6); color: var(--octo-c-text, #111827); }
.octo-chip:focus-within { outline: 2px solid #e09000; outline-offset: 2px; }
.octo-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.octo-chip-check { font-size: 0.6875rem; }

/* ---- selects: one look everywhere (border and radius of .octo-input as measured on today's pages) with a chevron 12 px from the right edge and room for it ---- */
:root :is(.octo-main, .octo-modal, .octo-modal-content, .octo-slide-panel, .octo-slider-panel, [role="dialog"]) select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8.25 10 4.25' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 12px !important;
	text-overflow: ellipsis;
}
:root[data-octo-theme="dark"] :is(.octo-main, .octo-modal, .octo-modal-content, .octo-slide-panel, .octo-slider-panel, [role="dialog"]) select:not([multiple]):not([size]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8.25 10 4.25' fill='none' stroke='%239aa7b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.dcs-log-container .octo-btn.octo-btn--secondary { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: var(--octo-c-on-dark, #ffffff); }

/* ---- base text size of the application area: what carries no size of its own is running text (14px), never the browser's 16px ---- */
.octo-main { font-size: var(--osn-fs-text); }

/* headings and small print that carry no size of their own, or a browser default (h3 18.7px, small 0.83em) */
.octo-main h2 { font-size: var(--osn-fs-card); }
.octo-main :is(h3, h4, h5, h6, summary) { font-size: var(--osn-fs-sub); }
.octo-main small { font-size: var(--osn-fs-hint); }
.octo-main .octo-mobile-name { font-size: var(--osn-fs-card); }
.octo-main :is(.octo-mobile-phone, .octo-mobile-status-chip) { font-size: var(--osn-fs-hint); }
.octo-modal { font-size: var(--osn-fs-text); }
.octo-modal small { font-size: var(--osn-fs-hint); }
.octo-chip.has-color { background: color-mix(in srgb, var(--octo-status) 25%, #ffffff); border-color: color-mix(in srgb, var(--octo-status) 45%, #ffffff); color: #111827; }
.octo-chip.has-color:hover { background: color-mix(in srgb, var(--octo-status) 35%, #ffffff); border-color: color-mix(in srgb, var(--octo-status) 60%, #ffffff); }
.octo-chip.has-color.is-selected { background: color-mix(in srgb, var(--octo-status) 55%, #ffffff); border-color: var(--octo-status); color: #111827; font-weight: 600; }

/* ---- action cells: never clip a button (the legacy .octo-table cell hides overflow); buttons wrap with the 8 px gap of the scale ---- */
:root .octo-table td.osn-users-actions { overflow: visible; text-overflow: clip; white-space: normal; text-align: right; }
:root .octo-table th.osn-users-actions-head { width: auto; min-width: 80px; }
.osn-users-actions .octo-btn { margin: 2px 0 2px 8px; }

/* ---- checkbox / radio rows (settings/parts.tsx CheckboxRow): box 16 px, 8 px to the text, hint indented to the text, 12 px between rows ---- */
.octo-content .octo-check-row { margin: 0 0 12px; }
.octo-content .octo-check-row:last-child { margin-bottom: 0; }
:root .octo-content .octo-form-group label.octo-checkbox-label, :root .octo-content .octo-form-group label.octo-radio-label, :root .octo-main label.octo-checkbox-label, :root .octo-main label.octo-radio-label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; font-weight: 400; }
:root .octo-main label.octo-checkbox-label input, :root .octo-main label.octo-radio-label input { width: 16px; height: 16px; margin: 0; flex: none; }
.octo-content .octo-check-row > .octo-field-hint { display: block; margin: 4px 0 0 24px; }
.octo-content .octo-form-group > label + .octo-check-row, .octo-content .octo-form-group > .octo-check-row:first-child { margin-top: 8px; }
.octo-content .octo-form-group > label:not(.octo-checkbox-label) + label.octo-checkbox-label { margin-top: 8px; }
.octo-content .octo-form-group > label.octo-checkbox-label + label.octo-checkbox-label { margin-top: 12px; }

/* ---- selectable items show their state with a tint (info blue; --octo-tint carries it into the dark scheme): selected = tint + border, hover = lighter tint,
   unselected = the light surface of the page, never white on white ---- */
:root {
	--osn-select-bg: color-mix(in srgb, #006b95 14%, var(--octo-c-card));
	--osn-select-border: color-mix(in srgb, #006b95 55%, var(--octo-c-card));
	--osn-select-hover: color-mix(in srgb, #006b95 7%, var(--octo-c-card));
	--osn-select-idle: var(--octo-c-card-head, #f7f9fb);
}
:root :is(.octo-dropdown-tab, .octo-tab-btn, .octo-email-tab, .octo-email-editor-tab, .octo-reports-preset, .octo-mp-cat, .octo-pagination-btn, .octo-proposal-tab, .octo-tracking-tab, .odub-tab, .owa-tabs__link, .dcs-tab, .octo-cal-tab, .chat-tab, .osn-dl-tile, .octo-wf-pleb-template-card, .octo-qf-chip, .octo-tag-chip, .octo-widget-sort-item):not(.octo-status-chip):not(.octo-chip) {
	background: var(--osn-select-idle);
}
:root :is(.octo-dropdown-tab, .octo-tab-btn, .octo-email-tab, .octo-email-editor-tab, .octo-reports-preset, .octo-mp-cat, .octo-pagination-btn, .octo-proposal-tab, .octo-tracking-tab, .odub-tab, .owa-tabs__link, .dcs-tab, .octo-cal-tab, .chat-tab, .osn-dl-tile, .octo-wf-pleb-template-card, .octo-tag-chip, .octo-widget-sort-item):not(.octo-status-chip):not(.octo-chip):hover {
	background: var(--osn-select-hover);
}
:root :is(.octo-dropdown-tab, .octo-tab-btn, .octo-email-tab, .octo-email-editor-tab, .octo-reports-preset, .octo-mp-cat, .octo-pagination-btn, .octo-proposal-tab, .octo-proposal-tab-active, .octo-tracking-tab, .odub-tab, .owa-tabs__link, .dcs-tab, .octo-cal-tab, .chat-tab, .osn-dl-tile, .octo-wf-pleb-template-card, .octo-tag-chip, .octo-density-option, .octo-widget-sort-item):is(.is-active, .is-selected, .active, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]):not(.octo-status-chip):not(.octo-chip):not(.octo-sidebar-density *) {
	background: var(--osn-select-bg);
	border-color: var(--osn-select-border);
	color: var(--octo-c-text, #111827);
}
:root :is(.octo-main, .octo-modal) label:not(.octo-checkbox-label):not(.octo-radio-label):not(.octo-chip) > :is(input[type="checkbox"], input[type="radio"]) { margin-right: 6px; }
:root .octo-table td:has(> .octo-btn), :root .octo-table td:has(> .octo-btn--icon), :root table td:has(> .octo-btn) { overflow: visible; text-overflow: clip; }
:root .octo-inv-table-container { overflow-x: auto; }
:root :is(.octo-modal, .octo-modal-content) label.octo-checkbox-label, :root :is(.octo-modal, .octo-modal-content) label.octo-radio-label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; font-weight: 400; }
:root :is(.octo-modal, .octo-modal-content) label.octo-checkbox-label input, :root :is(.octo-modal, .octo-modal-content) label.octo-radio-label input { width: 16px; height: 16px; margin: 0; flex: none; }
:root td:has(.octo-btn) { overflow: visible; text-overflow: clip; }

/* Narrow screens: rows of actions wrap instead of running out of the card. */
@media (max-width: 600px) {
    .octo-card-header,
    .octo-category-header,
    .octo-category-actions,
    .octo-flow-actions,
    .octo-form-actions,
    .octo-task-actions,
    .octo-proposal-row-actions { flex-wrap: wrap; row-gap: 12px; min-width: 0; }
    .octo-card-header > *,
    .octo-category-header > *,
    .octo-smtp-form > *,
    .octo-smtp-form-grid > * { min-width: 0; max-width: 100%; }
    .octo-form-actions .octo-btn,
    .octo-card-header .octo-btn { white-space: normal; max-width: 100%; }
    td.octo-task-actions, td.octo-text-right { white-space: normal; }
    .octo-tasks-table, .octo-proposal-table { display: block; overflow-x: auto; }
}

@media (max-width: 600px) {
    .octo-main table { display: block; max-width: 100%; overflow-x: auto; }
    .octo-main .octo-btn { max-width: 100%; }
    .octo-tab-action, .octo-btn.tab-action { margin-left: 0; }
}

@media (max-width: 600px) {
    .octo-main .octo-btn:not(.octo-btn--icon) { white-space: normal; text-align: center; }
    .octo-actions { grid-template-columns: minmax(0, 1fr); }
    .octo-actions > * { min-width: 0; }
}

@media (max-width: 600px) {
    .octo-dashboard-widgets { grid-template-columns: minmax(0, 1fr) !important; }
    .octo-dashboard-widgets > * { min-width: 0; }
    .osn-panel-footer-row, .osn-tax-row, .octo-detail-header-right, .octo-proposal-tab-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
}

@media (max-width: 600px) {
    .octo-main .octo-btn:not(.octo-btn--icon), .octo-modal .octo-btn:not(.octo-btn--icon) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; height: auto; min-height: 2.25rem; }
}

/* Notices and hint boxes: the text keeps a distance to the frame on every page,
   also where the page stylesheet of the original box is not loaded. */
.octo-content .octo-email-settings-msg,
.octo-content .octo-ranking-notice,
.octo-content .octo-email-editor-notice,
.octo-content .octo-flow-editor-notice,
.octo-content .octo-lc-notice,
.octo-content .octo-mobile-notice,
.octo-content .octo-proposal-error-msg,
.octo-modal .octo-email-settings-msg {
	padding: 10px 16px; /* as the notice on the e-mail settings page (email-settings-styles.css) */
	line-height: 1.5;
	border-radius: 6px;
}

/* Text and buttons never touch: a button stacked under or over a description, hint or list keeps 12px air.
   Buttons side by side (toolbars, flex rows) are not affected, see the button-gap rule in scripts/ui/crawl.mjs. */
.octo-content :is(p, ul, ol, label, h3, h4, h5, small, .octo-field-hint, [class*="-note"], [class*="-hint"], [class*="-desc"]) + .octo-btn,
.octo-modal :is(p, ul, ol, label, h3, h4, h5, small, .octo-field-hint, [class*="-note"], [class*="-hint"], [class*="-desc"]) + .octo-btn {
	margin-top: 12px;
}
.octo-content .octo-btn + :is(p, small, .octo-field-hint, [class*="-note"], [class*="-hint"]),
.octo-modal .octo-btn + :is(p, small, .octo-field-hint, [class*="-note"], [class*="-hint"]) {
	margin-top: 12px;
}

/* Flex and grid rows (toolbars, card headers, action bars, option rows) put buttons beside their label, not under it:
   no stacking margin there. Checked by the button-rowshift rule in scripts/ui/crawl.mjs. */
.octo-content :is(.octo-toolbar, .octo-config-options, [class*="actions"], [class*="toolbar"], [class*="-head"], [class*="header"], [class*="footer"], [class*="-row"], [class*="options"], [class*="-bar"], [class*="buttons"], [class*="-line"], [class*="filters"], [class*="-filter"]) > .octo-btn.octo-btn,
.octo-modal :is(.octo-toolbar, .octo-config-options, [class*="actions"], [class*="toolbar"], [class*="-head"], [class*="header"], [class*="footer"], [class*="-row"], [class*="options"], [class*="-bar"], [class*="buttons"], [class*="-line"], [class*="filters"], [class*="-filter"]) > .octo-btn.octo-btn {
	margin-top: 0;
}