/*
 * Sign-in pages (today templates/login.php, templates/reset-password.php): the stylesheets of the
 * head as on every Octoserv page, then the \3c style> block of the template (octo/login.css, copied
 * unchanged) and the few additions of the second factor.
 */
/**
 * 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: var(--octo-c-accent-on-dark);
}

.octo-nav-item.active .octo-nav-link {
	background: #2d3a4a;
	color:var(--octo-c-on-dark, #ffffff);
	border-left-color: var(--octo-c-accent-on-dark);
	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, color-mix(in srgb, var(--octo-c-accent-on-dark) 70%, white) var(--octo-ink, 100%), var(--octo-c-text));
	font-weight: 600;
	border-left: 3px solid var(--octo-c-accent-on-dark);
}

.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:var(--octo-c-accent-ink);
	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: 6px;
	padding: 0.625rem 1rem;
}
/* three or four tiles (New, Data, Mobile, Order): two columns, slim rows with the icon beside the label (25.10.2026: the tall tiles were too bulky) */

.octo-sidebar-tile {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 6px 8px;
	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: 32px;
	width: 100%;
	min-width: 0;
}
.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 {
	flex: none;
	font-size: 16px;
	width: 16px;
	height: 16px;
	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;
	overflow: hidden;
	text-overflow: ellipsis;
	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; }
.octo-sidebar-tile--order  { background: #003450; }

/* ============================================
   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:var(--octo-c-accent-ink); border-color: var(--octo-c-accent); }
.octo-mobile-views-list-item .octo-mvli-btn--edit:hover   { background: color-mix(in srgb, var(--octo-c-accent) 8%, transparent); }
.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 var(--octo-c-accent);
	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: var(--osn-btn-primary-bg-hover);
	border-color: var(--osn-btn-primary-bg-hover);
}

.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:var(--octo-c-accent-ink);
}

/* ============================================
   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: var(--osn-fs-title, 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:var(--octo-c-accent-ink); }
/* 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:var(--octo-c-accent); }
.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:var(--octo-c-accent); font-weight:600; }
.octo-btn-confirm:hover { filter:brightness(1.06); box-shadow:0 2px 8px color-mix(in srgb, var(--octo-c-accent) 30%, transparent); }

/* 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:var(--octo-c-accent); 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:var(--octo-c-accent); }
.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:var(--octo-c-accent)!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:var(--octo-c-accent-ink); }
#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:var(--octo-c-accent); 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:var(--octo-c-accent)!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:var(--octo-c-accent-ink); 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:var(--octo-c-accent-ink);
}

.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: var(--octo-c-accent);
}

/* 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:var(--octo-c-accent-ink);
	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: var(--octo-c-accent);
}

.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 var(--octo-c-accent);
}

.octo-btn-primary:hover:not(:disabled) {
	background: var(--osn-btn-primary-bg-hover);
	border-color: var(--osn-btn-primary-bg-hover);
}

.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: var(--octo-c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent);
}

.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 var(--octo-c-accent);
	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: var(--octo-c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent);
}

.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 var(--octo-c-accent);
	color:var(--octo-c-accent-ink);
	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 color-mix(in srgb, var(--octo-c-accent) 30%, transparent);
}

/* 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: var(--osn-btn-primary-bg-hover);
	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:var(--octo-c-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent); }
.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:var(--octo-c-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent); }
.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:var(--octo-c-accent-ink); 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: var(--octo-c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent);
}

.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 var(--octo-c-accent);
	color:var(--octo-c-accent-ink);
	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 color-mix(in srgb, var(--octo-c-accent) 30%, transparent);
}

/* ============================================
   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:var(--octo-c-accent-ink);
	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: var(--octo-c-accent) !important;
    color: var(--octo-c-accent-text, #1a1200) !important;
}
#octo-news-save:hover {
    background-color: var(--osn-btn-primary-bg-hover) !important;
    border-color: var(--osn-btn-primary-bg-hover) !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, #047857 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, #065f46 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: color-mix(in srgb, var(--octo-c-accent-on-dark) 20%, transparent);
	color: var(--octo-c-on-dark, #ffffff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--octo-c-accent-on-dark) 55%, transparent);
}

.octo-sidebar-density .octo-density-option.is-active svg {
	color:var(--octo-c-accent-ink);
}

/* ============================================
   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;
	}
}
/**
 * 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:var(--octo-c-accent-ink);
	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:var(--octo-c-accent-ink);
}

.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:var(--octo-c-accent-ink) !important;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.octo-notification-contact a {
    font-size: 0.8rem;
    color:var(--octo-c-accent-ink);
    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: var(--octo-c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent);
}

.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-glyph);
    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: color-mix(in srgb, var(--octo-c-accent) 15%, transparent);
    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:var(--octo-c-accent-ink);
    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:var(--octo-c-accent-ink);
    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:var(--octo-c-accent-ink);
    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;
    }
}

/* ===================================
   Anleitungen: Schritte, Hinweise, Bedienelemente (Dialog und eigene Seite)
   =================================== */

.octo-help-content ol.octo-help-steps { list-style: none; counter-reset: schritt; padding-left: 0; }
.octo-help-content ol.octo-help-steps > li { counter-increment: schritt; position: relative; padding: 2px 0 14px 44px; margin: 0; }
.octo-help-content ol.octo-help-steps > li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--octo-c-accent, #e09000); color: var(--octo-c-on-accent, #241603); font-weight: 700; display: grid; place-items: center; }
.octo-help-content .octo-help-note, .octo-help-content .octo-help-warn, .octo-help-content .octo-help-auto { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--octo-c-accent, #e09000); background: color-mix(in srgb, var(--octo-c-accent, #e09000) 9%, var(--octo-c-card, #fff)); }
.octo-help-content .octo-help-warn { border-left-color: var(--octo-c-danger, #b91c1c); background: color-mix(in srgb, var(--octo-c-danger, #b91c1c) 8%, var(--octo-c-card, #fff)); }
.octo-help-content .octo-help-auto { border-left-color: var(--octo-c-success, #15803d); background: color-mix(in srgb, var(--octo-c-success, #15803d) 8%, var(--octo-c-card, #fff)); }
.octo-help-content .octo-help-note > :last-child, .octo-help-content .octo-help-warn > :last-child, .octo-help-content .octo-help-auto > :last-child { margin-bottom: 0; }
.octo-help-content kbd.octo-help-ui { display: inline-block; padding: 1px 8px; border: 1px solid var(--octo-c-border, #d1d5db); border-bottom-width: 2px; border-radius: 6px; background: var(--octo-c-card-head, #f9fafb); font: inherit; font-weight: 600; white-space: nowrap; }
.octo-help-content figure { margin: 12px 0 18px; }
.octo-help-content figure img { margin: 0; }
.octo-help-content figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--octo-c-text-muted, #6b7280); }
.octo-help-content table.octo-help-table { border-collapse: collapse; width: 100%; margin: 0 0 18px; }
.octo-help-content table.octo-help-table th, .octo-help-content table.octo-help-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.octo-help-content table.octo-help-table th { background: var(--octo-c-card-head, #f9fafb); }
.octo-help-open { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 8px 14px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 8px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); font-weight: 600; text-decoration: none; cursor: pointer; }
.octo-help-open:hover { border-color: var(--octo-c-accent, #e09000); }
/* ============================================================
   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 var(--octo-c-accent);
	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: var(--osn-btn-primary-bg-hover);
	border-color: var(--osn-btn-primary-bg-hover);
	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: #241603;
	--octo-c-link: #006B95;
	--octo-c-input: #f4f7f9;
	--octo-c-input-border: #c9d6de;
	--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: #e09000;
	--octo-c-accent-text: #241603;
	--octo-c-link: #7cc4e2;
	--octo-c-input: rgba(0, 0, 0, 0.3);
	--octo-c-input-border: rgba(255, 255, 255, 0.14);
	--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"]):not(.osn-user-menu-item) {
	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.
   Dasselbe gilt fuer die Eintraege des Benutzermenues (Karte mit Textrolle,
   kein Linktext): sie sind oben ausgenommen und tragen ihre Farbe in native.css. */
[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);
}

/* A button in the header (e.g. "Termin vorschlagen") carries its icon in the colour of its label, in both schemes; otherwise the orange
   icon disappears on the orange button (27.10.2026). */
.octo-contact-detail .octo-box-header .octo-btn .dashicons,
[data-octo-theme] .octo-contact-detail .octo-box-header .octo-btn .dashicons {
	color: inherit;
}

[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> 50%, #ffffff);
     border: 1px solid color-mix(in srgb, <Grundfarbe> 80%, #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) 50%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--octo-status, #e5e7eb) 80%, #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) 50%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--octo-status, #e5e7eb) 80%, #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 Reihenfolge-Kachel: feste Flaeche #003450 (Octo-Dunkelblau), feste weisse Schrift (13:1),
   in beiden Schemata gleich - keine Rolle auf einer festen Flaeche. */
.octo-sidebar-tile--order,
[data-octo-theme="dark"] .octo-sidebar-tile--order,
.octo-sidebar-tile--order .octo-sidebar-tile-label,
.octo-sidebar-tile--order .octo-sidebar-tile-icon,
[data-octo-theme="dark"] .octo-sidebar-tile--order .octo-sidebar-tile-label,
[data-octo-theme="dark"] .octo-sidebar-tile--order .octo-sidebar-tile-icon {
	color: #ffffff;
}

/* 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;
}
/* Hide WordPress admin bar completely */
		html { margin-top: 0 !important; }
		* html body { margin-top: 0 !important; }
		@media screen and ( max-width: 782px ) {
			html { margin-top: 0 !important; }
			* html body { margin-top: 0 !important; }
		}
		#wpadminbar { display: none !important; }
		
		body.octo-login {
			min-height: 100vh; margin: 0; display: grid; place-items: center; background: #0f172a; color: #111827;
		}
		.octo-login-card {
			background: #fff; width: 100%; max-width: 420px; padding: 40px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
		}
		.octo-login-logo { display: block; margin: 0 auto 20px; max-height: 56px; }
		.octo-login-title { text-align: center; margin: 0 0 10px 0; font-size: 1.5rem; font-weight: 600; color: #111827; }
		.octo-login-subtitle { text-align: center; margin: 0 0 30px 0; color: #6b7280; font-size: 0.875rem; }
		.octo-field { display: grid; gap: 8px; margin-bottom: 16px; }
		.octo-label { font-weight: 500; color: #444; font-size: 0.875rem; }
		.octo-input { width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 0.875rem; }
		.octo-input:focus { outline: none; border-color: var(--octo-c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 15%, transparent); }
		.octo-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
		.octo-actions label { font-size: 0.875rem; color: #6b7280; }
		.octo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px 16px; border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 0.875rem; }
		.octo-btn-primary { background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); border-color: var(--octo-c-accent); width: 100%; }
		.octo-btn-primary:hover { filter: brightness(0.95); }
		.octo-help { text-align: center; margin-top: 16px; }
		.octo-help a { font-size: 0.875rem; }
		.octo-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; padding: 10px 12px; border-radius: 10px; margin-bottom: 16px; font-size: 0.875rem; }
		.octo-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 10px 12px; border-radius: 10px; margin-bottom: 16px; font-size: 0.875rem; }
		/* Honeypot */
		.hp-wrap { position: absolute; left: -10000px; top: -10000px; height: 0; width: 0; overflow: hidden; }
		/* Modal */
		.octo-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center; }
		.octo-modal.active { display: flex; }
		.octo-modal-content { background: #fff; width: 100%; max-width: 420px; border-radius: 16px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); position: relative; }
		.octo-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; color: #6b7280; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
		.octo-modal-close:hover { background: #f3f4f6; color: #111827; }
		.octo-modal-title { text-align: center; margin: 0 0 10px 0; font-size: 1.5rem; font-weight: 600; color: #111827; }
		.octo-modal-subtitle { text-align: center; margin: 0 0 24px 0; color: #6b7280; font-size: 0.875rem; }
/*
 * 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.
 */
/*
 * Recordings on tickets (screen, camera, voice message): the recorder (script /octo/support-capture.js draws .osc) and the player. One sheet for the ticket page of a customer, the
 * support request dialog and the ticket view of the staff. Every colour is a token of the design system; the buttons of the recorder carry the octo-btn roles (the script adds the
 * classes the page gives it), so nothing here colours a button.
 */
.osc-host { margin: 0 0 14px; }
.osc { border: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); padding: 12px 14px; font-size: 0.8125rem; line-height: 1.5; }
.osc p { margin: 0 0 8px; }
.osc .osc-title { font-weight: 600; }
.osc .osc-hint, .osc .osc-limit { color: var(--octo-c-muted, #4b5563); }
.osc .osc-error { color: var(--osn-btn-danger-text, #7a1a10); }
.osc-modes, .osc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.osc-live { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.osc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--osn-btn-danger-text, #7a1a10); animation: osc-pulse 1.2s ease-in-out infinite; }
.osc-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.osc-stage { display: block; width: 100%; max-height: 260px; background: #000000; margin: 0 0 10px; }
.osc-audio { display: block; width: 100%; margin: 0 0 10px; }
.octo-ticket-reply .osc-btn { margin-top: 0; }
@keyframes osc-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .osc-dot { animation: none; } }

.osc-player { margin: 6px 0 0; max-width: 480px; }
.osc-player .osc-stage, .osc-player .osc-audio { margin: 0 0 6px; }
.osc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: var(--octo-c-muted, #4b5563); }
.osc-download { color: var(--octo-c-link, #006b95); }
.osc-upload-state { font-size: 0.8125rem; color: var(--octo-c-muted, #4b5563); margin: 8px 0 0; }
/* "KI-Entwurf" / "KI-erstellt": the small visible label next to content an AI model wrote (shell/AiLabel.tsx). It takes the quiet role of the theme (like the
   chips), so it reads in both colour schemes; it is no control and has no hover. */
.osn-ai-label { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 8px; 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-badge, 0.6875rem); font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; max-width: 100%; }
/* a long virus name wraps inside its column instead of running over type and size */
.osn-scan-badge.is-infected { white-space: normal; overflow-wrap: anywhere; }

/* The writing aid (shell/AiWriteDialog.tsx): the choice of what happens to the text, and the draft below it. A draft is shown on the quiet surface, never as final text. */
.osn-ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.osn-ai-draft { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--osn-btn-quiet-border); border-radius: 8px; background: var(--osn-btn-quiet-bg); color: var(--osn-btn-quiet-text); }
.osn-ai-draft-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.osn-ai-draft-text p { margin: 0 0 8px; }
.osn-ai-draft-text p:last-child { margin-bottom: 0; }
/* in the toolbar of a block of the e-mail editor the button takes the look of its neighbours (the arrows and the bin) */
.octo-email-editor-canvas-item-actions .osn-ai-bare-button { font-weight: 600; }

/* "Ask the reports" (reports/AskReports.tsx) */
.osn-ask-reports { margin: 12px 0; }
.osn-ask-form { display: flex; flex-wrap: wrap; gap: 8px; }
.osn-ask-form input[type="text"] { flex: 1 1 320px; }
.osn-ask-form select { flex: 0 1 220px; }
.osn-ask-answer { margin-top: 12px; }
.osn-ask-figures { margin-top: 8px; }
.osn-ask-figure { margin: 6px 0; }
.osn-ask-figure ul { margin: 4px 0 0 18px; }
.osn-ai-subject { margin: 6px 0; }

/* The virus scan label next to a file of an outsider (documents/ScanBadge.tsx): quiet while the file waits, a frame in the warning colour when a virus was found. */
.osn-scan-badge { display: inline-flex; align-items: center; flex: none; padding: 1px 8px; 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-badge, 0.6875rem); font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; max-width: 100%; }
/* a long virus name wraps inside its column instead of running over type and size */
.osn-scan-badge.is-infected { white-space: normal; overflow-wrap: anywhere; }
.osn-scan-badge.is-infected { border-color: var(--octo-c-danger, #b91c1c); background: color-mix(in srgb, var(--octo-c-danger, #b91c1c) 12%, var(--octo-c-card)); color: var(--octo-c-text); }

/*
 * Tools of the contact list and the contact record: filter rows with days and condition groups, the export dialog, the tag field of the tag box, the counts on the
 * page of the tags. Loaded with native.css; every colour is a token of the theme, every size one of the type scale.
 */

/* filter rows: a number of days ("in the last 30 days") and a group of conditions inside a condition */
.octo-filter-row .octo-filter-value.osn-filter-days { width: 96px; min-width: 96px; max-width: 96px; flex: 0 0 96px; }
.osn-filter-unit { align-self: center; font-size: var(--osn-fs-text); color: var(--octo-c-muted, #626973); }
.octo-filter-row.has-group .osn-filter-group { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--octo-c-border, #e5e7eb); }
.osn-filter-group .octo-filter-row { background: var(--octo-c-card, #ffffff); }
.osn-filter-group > .octo-btn { align-self: flex-start; }

/* export dialog */
.osn-export { display: flex; flex-direction: column; gap: 4px; }
.osn-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.osn-export-columns { max-height: 320px; overflow: auto; padding: 4px 2px; }
.osn-export-section + .osn-export-section { margin-top: 10px; }
.osn-export-section-title { margin: 0 0 6px; font-size: var(--osn-fs-text); font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-export-section-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.osn-export-renames { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; margin: 8px 0 0; padding: 2px; }
.osn-export-rename { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osn-export-rename label { font-size: var(--osn-fs-badge); color: var(--octo-c-text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osn-export .octo-check-row { margin: 0 0 6px; }
#octo-export-dialog .octo-modal-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* tag field of the tag box: tags with a button to remove, the input with its suggestions */
.osn-tag-assigned { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 9999px; font-size: var(--osn-fs-hint); font-weight: 500;
    background: color-mix(in srgb, #fffbf0 var(--octo-tint, 100%), var(--octo-c-card)); color: var(--octo-c-accent-ink);
    border: 1px solid color-mix(in srgb, #fed7aa var(--octo-tint, 100%), var(--octo-c-border)); }
.osn-tag-assigned .osn-tag-remove.octo-btn.octo-btn--sm { min-height: 18px; min-width: 18px; padding: 0 2px; }
.osn-tag-picker { margin: 8px 0 0; }
/* the suggestions stay in the flow of the box: a box clips what sticks out of it */
.osn-tag-options { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 4px 0 0; padding: 4px; background: var(--octo-c-card, #ffffff); border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-tag-options .octo-btn { justify-content: flex-start; }
.osn-tag-error { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }

/* page of the tags: the number of records of a tag */
.octo-card.osn-tags-card { max-width: 720px; }
.osn-tags-item .osn-tags-name { flex: 1 1 auto; }
.osn-tags-item { flex-wrap: wrap; gap: 8px; }
.osn-tags-actions { align-items: center; flex-wrap: wrap; }
.osn-tags-merge-count { margin-top: 12px; }
.osn-tags-count { min-width: 36px; text-align: center; margin: 0 12px; padding: 1px 8px; border-radius: 10px; font-size: var(--osn-fs-badge); background: var(--octo-c-card-head, #f7f9fb); border: 1px solid var(--octo-c-border, #e5e7eb); color: var(--octo-c-text, #111827); }

/* below 1200 px the toolbar of a list holds the search and one button (the buttons "Table or Kanban" and "Change" are left out the same way): exporting is no job for a phone */
@media (max-width: 1200px) {
    #octo-export-list { display: none !important; }
}

/* status of an API token (profile): the same tinted pill as the status in Tools */
.osn-token-status { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: var(--osn-fs-badge); font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent;
    background: color-mix(in srgb, #dcfce7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-token-status.is-expired { 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-token-status.is-revoked { background: color-mix(in srgb, #f3f4f6 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #374151 var(--octo-ink, 100%), var(--octo-c-text)); }
#osn-token-once .octo-modal-body > .octo-input { margin: 12px 0; }
#osn-token-new .octo-chip-list { margin-top: 8px; max-height: 240px; overflow: auto; }
#osn-tag-merge .octo-modal-body > p, #osn-tag-delete .octo-modal-body > p { margin: 0 0 16px; }
#osn-tag-merge .octo-modal-body > p.osn-tags-merge-count { margin: 12px 0 0; }
.osn-tags-new .octo-btn { margin-top: 8px; }
.osn-tags-new textarea.osn-tags-input { resize: vertical; font-family: inherit; }
.osn-tags-item .osn-tags-check { flex: 0 0 auto; margin: 0 10px 0 0; }
.osn-tags-name .osn-tags-desc { display: block; margin: 2px 0 0; }
.osn-tags-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
#osn-tag-delete-many .octo-modal-body > p { margin: 0 0 16px; }
.osn-tags-new .octo-field-hint { display: block; margin: 4px 0 12px; }
/* new tag: the button stands at the right end under the field; rows keep their action slot so the buttons line up */
.osn-tags-new { display: flex; flex-direction: column; }
.osn-tags-new .octo-btn { align-self: flex-end; }
.osn-tags-actions { min-width: 150px; justify-content: flex-end; }
/*
 * Pipelines, deals and their contacts (decision 20.10.2026): board toolbar, age of the last activity, status pills, progress through the stages,
 * contacts of a deal, dashboard widget, pipeline tabs and stage editor. Colours: the meaning of a state (green, amber, red) is a data colour
 * (--octo-status) mixed over white like every chip (octo-theme.css); text colours follow the scheme with --octo-ink.
 */

/* board toolbar above the lanes */
.osn-board-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 12px; }
.osn-board-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--osn-fs-label, 0.875rem); color: var(--octo-c-muted); }
.osn-board-field select { min-width: 220px; }
.osn-board-check { display: flex; align-items: center; gap: 8px; font-size: var(--osn-fs-label, 0.875rem); color: var(--octo-c-text); padding-bottom: 8px; }
.osn-board-refresh { margin-left: auto; }
.osn-kanban-lane-sum { padding: 6px 16px 0; font-size: var(--osn-fs-hint, 0.8rem); color: var(--octo-c-muted); font-variant-numeric: tabular-nums; }
.osn-kanban-card-deal { font-size: var(--osn-fs-hint, 0.8rem); color: var(--octo-c-muted); margin: 0 0 4px; overflow-wrap: anywhere; }

/* age of the last activity: under a day green, up to three days amber, older red (the dot is a data colour) */
.osn-age-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--osn-age, #9ca3af); flex: 0 0 auto; }
.osn-age-fresh { --osn-age: #22c55e; }
.osn-age-warm { --osn-age: #f59e0b; }
.osn-age-stale { --osn-age: #ef4444; }
.octo-kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* small marks next to a title: primary contact, role, stage */
.osn-chip-mini { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--osn-fs-badge, 0.6875rem); font-weight: 600; background: var(--octo-c-quiet-bg); border: 1px solid var(--octo-c-quiet-border); color: var(--octo-c-quiet-text); }
.osn-chip-mini + .osn-chip-mini { margin-left: 4px; }
.osn-deal-row .octo-deal-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* status pills with counts */
.osn-deal-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.osn-deal-pill { cursor: pointer; padding: 3px 10px; font-size: var(--osn-fs-hint, 0.8rem); }
.osn-deal-pill.is-active { border-width: 2px; border-color: var(--octo-c-text); }
.osn-deal-pill:disabled { cursor: default; }
.osn-deal-pill-count { font-weight: 700; margin-right: 2px; }
.osn-deal-pills-total { margin-left: auto; font-size: var(--osn-fs-hint, 0.8rem); color: var(--octo-c-muted); font-variant-numeric: tabular-nums; }

/* progress through the stages */
.osn-deal-progress { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--octo-c-border); overflow: hidden; }
.osn-deal-progress-fill { height: 100%; border-radius: 3px; background: var(--octo-c-accent); }
.osn-deal-progress.is-won .osn-deal-progress-fill { background: #22c55e; }
.osn-deal-progress.is-lost .osn-deal-progress-fill { background: #9ca3af; }

/* planned close date */
.osn-close-text { font-size: var(--osn-fs-hint, 0.8rem); font-weight: 600; }
.osn-close-text.is-past { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-close-text.is-soon { color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-close-text.is-later, .osn-close-text.is-lost { color: var(--octo-c-muted); }
.osn-close-text.is-won { color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-deal-row.is-lost .octo-deal-item-title a { color: var(--octo-c-muted); }

/* contacts of a deal */
.osn-deal-contacts { display: flex; flex-direction: column; gap: 8px; }
.osn-deal-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 12px; border: 1px solid var(--octo-c-border); border-radius: 6px; background: var(--octo-c-card-head); }
.osn-deal-contact-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.osn-deal-contact-mail { font-size: var(--osn-fs-hint, 0.8rem); color: var(--octo-c-muted); overflow-wrap: anywhere; }
.osn-deal-contact-actions, .osn-deal-contact-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.osn-deal-contact-edit input { width: 220px; }
.osn-deal-from-items { margin-top: 12px; }
#octo-deal-modal .osn-deal-from-items input[type="checkbox"] { width: auto; margin: 0; }

/* dashboard widget "My deals" */
.osn-deal-widget-list { display: flex; flex-direction: column; gap: 8px; }
.osn-deal-widget-row { display: block; padding: 8px 12px; border: 1px solid var(--octo-c-border); border-radius: 6px; text-decoration: none; color: var(--octo-c-text); background: var(--octo-c-card-head); }
.osn-deal-widget-row:hover { border-color: var(--octo-c-link); }
.osn-deal-widget-main { display: flex; justify-content: space-between; gap: 12px; font-size: var(--osn-fs-text, 0.875rem); }
.osn-deal-widget-title { font-weight: 600; overflow-wrap: anywhere; }
.osn-deal-widget-value { font-variant-numeric: tabular-nums; color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text)); white-space: nowrap; }
.osn-deal-widget-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--osn-fs-hint, 0.8rem); color: var(--octo-c-muted); }

/* pipelines: tabs and the stage editor */
.osn-pipeline-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.osn-pipeline-tabs .osn-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.osn-pl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.osn-pl-inline input[type="text"] { flex: 1 1 260px; max-width: 420px; }
.osn-pl-add-stage { margin: 16px 0 0; }
.octo-pl-table input.octo-input.osn-pl-label { width: 100% !important; min-width: 160px; }
.osn-pl-actions { white-space: nowrap; }
.osn-pl-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 4px; background: var(--octo-status, #cccccc); border: 1px solid var(--octo-c-border); }

/* the "Spam" drop zone under the board: a card dropped here marks its contact as spam */
.osn-kanban-spam { margin: 12px 0 0; padding: 14px 16px; border: 2px dashed var(--octo-c-border, #9ca3af); border-radius: 8px; text-align: center; color: var(--octo-c-muted); font-size: var(--osn-fs-label, 0.875rem); }
.osn-kanban-spam.osn-kanban-over { border-style: solid; color: var(--octo-c-text); }

/* 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; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--octo-c-muted, #6b7280); background: transparent; }
/* 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); border-color: 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; } /* the ranking colour orange is a meaning, not the brand: it stays orange on a tenant with its own colour */
.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); :root and the element raise it above
   .octo-field-dropdown and the select rule of the schemes, which otherwise set the plain border colour */
.osn-status-level { padding: 4px 10px; border-radius: 4px; font-size: inherit; font-weight: 500; border: 2px solid var(--octo-status, transparent); }
:root select.osn-status-level[style*="--octo-status"],
:root [data-octo-theme] select.osn-status-level[style*="--octo-status"] { border: 2px solid var(--octo-status); }

/* status chips as on hub (octo-theme.css 547-569 of the old Octoserv, owner 27.10.2026: the glass of 25.10.2026 looked too faint, above all
   with dark status colours): a light field of the status colour (25 % on white), frame 45 %, dark text. The chip is a fixed surface, so
   its text does not switch with the scheme (rule of CLAUDE.md: a role on a fixed surface is always wrong). */
:root .octo-status-chip[style*="--octo-status"],
:root select.octo-status-chip[style*="--octo-status"],
:root [data-octo-theme] select.octo-status-chip[style*="--octo-status"] {
    background-color: color-mix(in srgb, var(--octo-status) 25%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--octo-status) 45%, #ffffff);
    color: #111827;
}

/* 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-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; }
/* tab tools of the data view panel (name, order, delete, add) */
.osn-view-tab-tools { justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.osn-view-tab-tools .octo-input { flex: 1 1 12rem; min-width: 0; }
.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 var(--octo-c-accent); }
.osn-spam-confirm:hover { background: var(--osn-btn-primary-bg-hover); }

/* 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: var(--octo-c-accent-ink); }
.osn-company-title-icon { margin-right: 8px; color: var(--octo-c-accent-ink); }
.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 var(--octo-c-accent); }
#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; }
/* company dialog: the new primary contact is typed in a panel of its own below the search */
.osn-create-newcontact { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card-head, #f7f9fb); }
.osn-create-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 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; }
.osn-login-sso { width: 100%; margin-top: 12px; }
/* 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; }
/* the confirmation and the prompt are centred by the flex box: the page of the campaigns and e-mails moves .octo-modal-content by its slide-in transform, which drops the translate(-50%,-50%) of the absolute centring */
:is(#octo-confirm-dialog, #octo-prompt-dialog).octo-modal > .octo-modal-content { position: relative; top: auto; left: auto; transform: none; }
/* the dialogs of the flow files: the page of the campaigns hides every .octo-modal until it is marked open, these two are shown by their own state */
#osn-flow-import.octo-modal, #osn-flow-save-template.octo-modal, #osn-flow-simulator.octo-modal { 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-via { margin-left: 8px; font-size: 11px; color: var(--octo-c-faint, #9ca3af); }
.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); }
/* white label: a brand with a logo for dark surfaces draws both pictures in the head of the sidebar; the head has the surface of the card, so the scheme picks the one that reads on it */
.osn-logo-dark { display: none; }
[data-octo-theme="dark"] .osn-logo-dark { display: block; }
[data-octo-theme="dark"] .osn-logo-light { display: none; }
.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: var(--octo-c-accent-ink); border-bottom-color: var(--octo-c-accent, #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: var(--octo-c-accent-ink); 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-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 > Teams */
.osn-team-card { margin-top: 20px; }
.osn-team-info { margin-top: 0; padding-bottom: 14px; }
.osn-team-desc { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-top: 2px; }
.osn-team-members { max-height: 240px; overflow-y: auto; margin-top: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-team-mail { color: var(--octo-c-muted, #6b7280); margin-left: 6px; font-size: 0.8rem; }
.osn-team-none { margin: 0; color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
.osn-team-usage { margin: 0 0 12px; padding-left: 20px; font-size: 0.875rem; }

/* 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 var(--octo-c-accent); 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; }
.osn-lib-actions { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 12px; }
#octo-starter-library ul { margin: 0 0 8px; padding-left: 18px; }
.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-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; height: 20px; margin-left: 6px; padding: 0 8px; font-size: var(--osn-fs-badge); line-height: 1; border-radius: 9999px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.osn-keys-badge .dashicons { width: 11px; height: 11px; font-size: 11px; line-height: 1; margin: 0; }
.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-badge.is-muted { background: color-mix(in srgb, #e5e7eb var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #374151 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-user-level { display: block; margin: 0; font-weight: 600; }
/* page API keys: search + filter bar above the category tabs, the field that matched the search */
.osn-keys-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.osn-keys-search { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; max-width: 520px; }
.osn-keys-search .octo-input { flex: 1; min-width: 0; }
.octo-form-group.is-hit { padding: 8px 10px; border-radius: 6px; background: var(--osn-select-bg); box-shadow: inset 0 0 0 1px var(--osn-select-border); }
.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: 860px; }
.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; min-width: 140px; }
.osn-emails-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* five actions do not fit beside the name: the row wraps instead of squeezing the name to nothing */
.octo-email-item { flex-wrap: wrap; }
.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-body input + label, .osn-emailnew-body select + label { margin-top: 12px; }
.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: var(--octo-c-accent); 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: var(--octo-c-accent); border-color: var(--octo-c-accent); 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%; }
/* mail editor: countdown sketch (mail content is always light) */
.osn-ee-countdown-row { display: inline-flex; gap: 8px; padding: 8px; width: 100%; box-sizing: border-box; justify-content: center; }
.osn-ee-countdown-cell { flex: 1; text-align: center; }
.osn-ee-countdown-num { background: #1f2937; color: #ffffff; border-radius: 8px; padding: 10px 0; font: 700 24px Arial, Helvetica, sans-serif; }
.osn-ee-countdown-label { margin-top: 4px; font: 11px Arial, Helvetica, sans-serif; color: #374151; text-transform: uppercase; }
.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: var(--octo-c-accent); border-color: var(--octo-c-accent); 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-flow-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.osn-flow-check-lead { font-size: 13px; }
.osn-flow-check-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.osn-flow-check-list li { margin: 6px 0; }
.osn-flow-check-show { margin-left: 8px; }
.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%; }
/* today WIDE_STEPS: "E-Mail senden" 60 % */
.octo-flow-settings.osn-settings-mid { width: 60%; }
/* the masks of today (class-octo-flow-editor-rest.php): controls in one row, the heading of the frame Groundhogg draws, the titles of the include and exclude filters */
.osn-inline-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.osn-inline-row > label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; }
.osn-step-settings .osn-num, .osn-inline-row > .osn-num, .osn-inline-row > label > .osn-num { width: 80px; flex: 0 0 80px; }
.osn-gh-heading { margin: 4px 0 12px; font-size: 15.2px; font-weight: 600; color: var(--octo-c-text, #1e293b); }
.osn-gh-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--octo-c-text, #1e293b); }
.osn-filter-title { margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--octo-c-border, #e2e8f0); font-size: 12.8px; font-weight: 600; color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-tag-pill.octo-tag-pill-orphan { border: 1px dashed var(--octo-c-accent, #e09000); font-style: italic; }
.osn-waiting { margin: 0 0 4px; font-size: 13px; color: var(--octo-c-muted, #64748b); }
.osn-webhook-map { width: 100%; }
.osn-webhook-map .osn-webhook-value { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the days of the month as tiles (render_delay_timer) */
.osn-day-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.osn-day-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 4px; border: 1px solid var(--octo-c-border, #cbd5e1); border-radius: 4px;
    font-size: 12.8px; cursor: pointer; color: var(--octo-c-text, #1e293b); background: var(--octo-c-card, #fff); }
.osn-day-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.osn-day-tile.is-selected { border-color: #006B95; font-weight: 700; color: color-mix(in srgb, #006B95 var(--octo-ink, 100%), var(--octo-c-text)); background: color-mix(in srgb, #e0f2fe var(--octo-tint, 100%), var(--octo-c-card)); }
/* the branches of the multi branch and the random distribution (BranchEditor.js): a card per branch, opened by a click */
.osn-branch-box { margin-bottom: 8px; }
.osn-branch-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.osn-branch-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 13px; background: #006B95; color: #fff; font-size: 11px; font-weight: 700; }
.osn-branch-name { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--octo-c-text, #1e293b); }
.osn-branch-body { margin-top: 10px; }
/* the share of path A and B of the split test (SplitTestSettings.js) */
.osn-split-bar { display: flex; height: 8px; margin-top: 8px; border-radius: 4px; overflow: hidden; }
.osn-split-a { background: #006B95; }
.osn-split-b { background: var(--octo-c-accent, #e09000); }
.osn-split-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.8px; color: var(--octo-c-muted, #64748b); }
/* the accordions "Terminplaner" and "Benachrichtigung" of the telephone assistant */
.octo-flow-accordion { margin-bottom: 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; }
.octo-flow-accordion-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--octo-c-text, #1e293b); text-align: left; }
.octo-flow-accordion-badge { flex: 1 1 auto; font-weight: 600; }
.octo-flow-accordion-body { padding: 0 12px 12px; }
.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; }
/* the row of buttons of a list entry with many actions (campaign start): wraps instead of leaving the box on a phone */
.octo-content .osn-wrap-actions .octo-data-row-actions { flex-wrap: wrap; max-width: 100%; }
.osn-wrap-actions .octo-data-row { flex-wrap: wrap; }
.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; }
/* a rule of the step condition in the narrow settings panel: one framed box per rule, its parts below each other, the remove cross in the corner and the AND/OR switch
   between two boxes (the list views place it absolutely below a row; without a positioned row it ended up below the window) */
.osn-flow-filters .octo-filter-row { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 40px 12px 12px; margin-bottom: 10px;
    border: 1px solid var(--octo-c-border, #e2e8f0); border-radius: 6px; background: var(--octo-c-card-head, #f9fafb); }
.osn-flow-filters .osn-flow-logic { width: 100%; margin-bottom: 10px; }
.osn-flow-filters .octo-filter-row > :not(.octo-filter-remove):not(.octo-filter-relation) { flex: 1 1 120px; min-width: 0; margin: 0 !important; box-sizing: border-box; }
/* as the rule of today: the field over the whole width, condition and value side by side below it */
.osn-flow-filters .octo-filter-row > .octo-filter-field { flex: 1 1 100%; width: 100%; }
.osn-flow-filters .octo-filter-row > .octo-filter-operator { flex: 0 0 130px; }
.osn-flow-filters .octo-filter-row > .octo-filter-remove { position: absolute; top: 10px; right: 8px; }
/* the choice below the rules ("Otherwise", "Jump to") sits outside the content of the panel and missed its field look: the text stuck to the left edge */
.octo-flow-run-condition-body .octo-step-field select { display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--octo-c-border, #e2e8f0); border-radius: 6px;
    background: var(--octo-c-card, #fff); color: var(--octo-c-text, #334155); font-size: 13px; box-sizing: border-box; margin-top: 4px; }

/* a row of "Edit fields": field and function on the first line, value and days on the second (side by side the values were cut to a few letters) */
.osn-row-fields.osn-field-edit { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--octo-c-border, #e2e8f0); }
.osn-row-fields.osn-field-edit > select:nth-of-type(1), .osn-row-fields.osn-field-edit > select:nth-of-type(2) { flex: 1 1 calc(50% - 25px); order: 1; }
.osn-row-fields.osn-field-edit > button { flex: 0 0 auto; order: 2; }
.osn-row-fields.osn-field-edit > select:nth-of-type(3), .osn-row-fields.osn-field-edit > input:not(.osn-num) { flex: 1 1 140px; order: 3; }
.osn-row-fields.osn-field-edit > .osn-num { flex: 0 0 90px; order: 4; }
.osn-row-fields.osn-field-edit > * { margin-bottom: 0 !important; }
.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%; margin-bottom: 6px; }
.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-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.osn-fb-divider { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-fb-question { margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; background: var(--octo-c-card); border: 1px solid var(--octo-c-border); }
.osn-fb-error { color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.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 var(--octo-c-accent); border-radius: 5px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--octo-c-accent) 22%, transparent), color-mix(in srgb, var(--octo-c-accent) 8%, transparent)); color: var(--octo-c-accent-ink-deep); 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; }
/* form builder as the old mask: fine print, muted notes, rows of the questionnaire and of the time bands, radio lines, bars of the column split */
.osn-fb-fine { font-size: 11px; line-height: 1.5; color: var(--octo-c-faint, #64748b); }
.osn-fb-muted { font-size: 11px; font-weight: 400; color: var(--octo-c-faint, #64748b); }
.osn-fb-check-low { margin-top: 18px; }
.osn-fb-self-start { align-self: flex-start; }
.osn-fb-block { display: block; margin-bottom: 8px; }
.osn-fb-mt6 { margin-top: 6px; }
.osn-fb-empty { margin: 0; color: var(--octo-c-faint, #64748b); font-style: italic; font-size: 13px; }
.osn-fb-radios { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.osn-fb-qrow { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-fb-qrow-top { display: flex; gap: 6px; align-items: center; }
.osn-fb-grow { flex: 1; }
.osn-fb-qopts { width: 210px; }
.osn-fb-qeyebrow { width: 190px; }
.osn-fb-w60 { width: 60px; }
.osn-fb-w90 { width: 90px; }
.osn-fb-w104 { width: 104px; flex: 0 0 auto; }
.osn-fb-inline-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--octo-c-muted, #475569); }
.osn-fb-level { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-fb-level-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--octo-c-faint, #64748b); }
.osn-fb-readonly { background: var(--octo-c-card-head, #f8fafc); cursor: text; }
.osn-fb-rawcode { white-space: pre; overflow: auto; line-height: 1.4; font-size: 11px; background: var(--octo-c-card-head, #f8fafc); cursor: text; }
.osn-fb-frame { display: block; width: 100%; min-height: 400px; margin-top: 12px; border: 1px solid var(--octo-c-border, #e2e8f0); border-radius: 8px; }
.osn-fb-fullframe { width: 100%; height: 100%; min-height: 70vh; border: 0; display: block; }
.osn-fb-cond-field { width: 170px; }
.osn-pleb-bars { display: flex; gap: 3px; height: 20px; margin-bottom: 6px; }
.osn-pleb-bar-form { background: var(--octo-c-accent, #006B95); border-radius: 2px; }
.osn-pleb-bar-side { background: var(--octo-c-border, #cbd5e1); border-radius: 2px; }
.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; }
/* a row with Start and Stop is full: the actions drop below the name instead of squeezing it to nothing */
.octo-flow-item:has(.osn-flow-actions .octo-btn--success) { flex-wrap: wrap; }
.octo-flow-item:has(.osn-flow-actions .octo-btn--success) .osn-flow-name { min-width: 140px; }
.octo-flow-item:has(.osn-flow-actions .octo-btn--success) .osn-flow-actions { flex-wrap: wrap; justify-content: flex-end; }
.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-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.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; flex-wrap: wrap; gap: 8px; align-items: center; }
.osn-note-pin { font-size: 14px; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--octo-c-accent-ink); }
select.osn-task-snooze { width: auto; max-width: 9rem; min-height: 24px; padding: 3px 6px; font-size: 12px; }
.osn-repeat-rule { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.osn-repeat-weekdays { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.osn-repeat-rule input[type="number"] { width: 5rem; }
.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: flex-start; 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: visible; white-space: normal; overflow-wrap: break-word; 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; margin-top: 4px; 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: var(--octo-c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 15%, transparent); }
.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: var(--octo-c-accent); 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-block { margin-bottom: 16px; }
.osn-dl-detail { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }
.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); }
/* an appointment that came from an external calendar (hub 9): green edge */
.octo-appointment-link.octo-type-external-cal { border-left: 4px solid #16a34a; }
.osn-ap-slot-choice { display: block; padding: 4px 0; }
.osn-ap-wish { padding: 8px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); }
.osn-ap-wish-list { margin: 4px 0; padding-left: 18px; font-size: 0.875rem; }
/* an open proposal is only held, not yet an appointment (hub 2.76.0): italic */
.octo-appointment-link.octo-type-proposal .octo-appointment-title { font-style: italic; }
.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-group-block { margin-bottom: 12px; }
.osn-ap-group-title { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px 14px; font-size: 0.95rem; color: var(--octo-c-text, #111827); }
.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-place-mode { margin-bottom: 6px; }
.osn-ap-place-note { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.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; }
/* the contact pill of the proposal dialog: in the dark scheme the tinted pill read 4.3:1, so it takes the card surface and the text colour */
:root[data-octo-theme="dark"] .octo-proposal-contact-pill { background: var(--octo-c-card-head); border-color: var(--octo-c-border); color: var(--octo-c-text); }
:root[data-octo-theme="dark"] .octo-proposal-contact-pill .octo-proposal-contact-name { color: var(--octo-c-text); }
/* the dialogs of the appointments on a phone: the legacy mobile rule stacks the buttons in the middle; they stay in one row at the right end, the main action last */
@media (max-width: 768px) {
	#octo-proposal-modal .octo-modal-actions, #octo-appointment-modal .octo-modal-actions { flex-direction: row; align-items: center; justify-content: flex-end; }
	#octo-proposal-modal .octo-modal-actions .octo-btn, #octo-appointment-modal .octo-modal-actions .octo-btn { margin: 0; }
}
.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-placeholder-chip { margin-left: 6px; vertical-align: middle; }
.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-sub { display: block; font-size: 11px; color: var(--octo-c-muted, #6b7280); }
.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-colored { fill: var(--osn-slice); background: var(--osn-slice); }
.osn-chart-tone-confirmed { fill: #22c55e; background: #22c55e; }
.osn-chart-tone-requested { fill: #9ca3af; background: #9ca3af; }
.osn-chart-tone-revoked { fill: #f97316; background: #f97316; }
.osn-chart-tone-none { 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)); }
.octo-reports-stat-compare.up { 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-hint + .osn-import-selects { margin-top: 8px; }
.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-glyph); }

/* 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-sending-stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 1rem 0; }
.osn-sending-stats-head .osn-report-meta { margin: 0; }
.osn-sending-stats-head .osn-hub-export { margin: 0; }
.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: var(--octo-c-accent-ink); }
.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: var(--octo-c-accent-ink); }
.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-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; }
/* module overview of the Octoserv admin: the level of a module (core grey, product module blue, customer module violet; fixed tint, fixed text like every chip) */
.osn-admin-chip.is-product { --osn-admin-chip: #3b82f6; }
.osn-admin-chip.is-customer { --osn-admin-chip: #8b5cf6; }
/* edition of a tenant (3a) and the class of a node in it: fixed tint, fixed dark text like every chip */
.osn-admin-chip.is-edition { --osn-admin-chip: #3b82f6; margin-left: 8px; }
.osn-admin-edition { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.osn-admin-edition .octo-input { width: auto; min-width: 160px; margin: 0; }
.osn-admin-edition-bar { margin-bottom: 8px; }
.osn-admin-area-name .osn-admin-edition-chip { margin-left: 8px; }
.osn-edition-list { margin: 4px 0 12px 20px; padding: 0; }
.osn-modules-card { margin-top: 24px; }
.osn-modules-card .osn-admin-chip { margin-left: 0; }
.osn-modules-filter { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.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; }
/* Key figures of the platform (A27): the days of the period, the bars of mails and flow runs, the table per tenant */
.osn-metrics-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.osn-metrics-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 24px 0; }
.osn-metrics-charts h4 { margin: 0 0 8px; font-size: var(--osn-fs-text); font-weight: 600; color: var(--octo-c-text); }
.osn-metrics-bars { display: block; width: 100%; height: 72px; }
.osn-metrics-bar { fill: var(--octo-c-primary, currentColor); opacity: .55; }
.osn-metrics-bar.is-failed { fill: currentColor; opacity: 1; color: var(--octo-c-danger, #991b1b); }
.osn-metrics-table th.num, .osn-metrics-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.osn-metrics-table tr.is-attention td { background: color-mix(in srgb, var(--octo-c-danger, #991b1b) 8%, transparent); }
.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; }

/* contact page, found when the check:ui crawl began to visit it (colours of the copied stylesheets that fail the measured contrast) */
/* empty meta line under a field: the muted text colour of the scheme instead of a fixed grey (1.5:1 on the field background) */
.octo-contact-detail .octo-detail-meta-empty { color: var(--octo-c-muted, #626973); }
/* quick action labels: the tone of the action is mixed into the text colour, not used pure (pure orange or blue on the tinted button is 2.3:1) */
.octo-qa-label { color: color-mix(in srgb, var(--qa-color, #9a6200) calc(var(--octo-ink, 100%) * 0.4), var(--octo-c-text)); }
/* score circle of the ranking box: dark text on the light surfaces, light text on the dark ones; red as the dot of the list (#800000) */
.octo-ranking-score-circle.green, .octo-ranking-score-circle.yellow, .octo-ranking-score-circle.orange { color: #1a1200; }
.octo-ranking-score-circle.blue, .octo-ranking-score-circle.purple { color: #ffffff; }
:root:not([data-octo-theme="dark"]) .octo-ranking-score-circle.red { background: #800000; color: #ffffff; }

/* Telephony: the phone in the browser, docked at the bottom right of every page (component of the shell). Colours are roles of the theme. */
.osn-phone { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); }
/* the dock at the right edge (EdgeDock): a narrow flag with the phone and the chat that slides out to the left on a click; it covers no button of the page */
.osn-dock { position: fixed; right: 0; bottom: 160px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100vw - 8px); }
:root .octo-btn.osn-dock-handle, :root .octo-btn.osn-dock-item { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0; height: 44px; min-height: 44px; padding: 0; overflow: hidden; white-space: nowrap;
    border-right: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 2px 8px color-mix(in srgb, var(--octo-c-text, #111827) 18%, transparent); }
:root .octo-btn.osn-dock-handle { width: 22px; min-width: 22px; height: 28px; min-height: 28px; justify-content: center; align-self: flex-end; }
:root .octo-btn.osn-dock-handle .dashicons { font-size: 16px; width: 16px; height: 16px; }
.osn-dock-icon { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; }
.osn-dock-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
.osn-dock-icon .osn-phone-dot { position: absolute; right: 5px; bottom: 6px; width: 10px; height: 10px; }
.osn-dock-badge { position: absolute; top: 3px; right: 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--osn-btn-primary-bg); color: var(--osn-btn-primary-text); font-size: var(--osn-fs-badge); font-weight: 600; line-height: 1; }
.osn-dock-label { max-width: 0; opacity: 0; overflow: hidden; font-size: var(--osn-fs-button); transition: max-width 0.22s ease, opacity 0.18s ease, padding 0.22s ease; padding: 0; }
.osn-dock.is-open .osn-dock-label { max-width: 260px; opacity: 1; padding: 0 14px 0 2px; }
@media (prefers-reduced-motion: reduce) { .osn-dock-label { transition: none; } }
.osn-phone-panel, .osn-phone-call { width: 300px; max-width: 100%; padding: 16px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.osn-phone-pill { gap: 8px; }
.osn-phone-dot { flex: none; display: inline-block; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #6b7280; background: #9ca3af; }
/* the state of the phone is a meaning colour, fixed in both schemes (a dot, not text: 3:1 against light and dark cards):
   green ready, amber connecting, red offline or refused, green and pulsing in a call */
.osn-phone-dot--online { background: #16a34a; border-color: #15803d; }
.osn-phone-dot--connecting { background: #f59e0b; border-color: #b45309; }
.osn-phone-dot--offline, .osn-phone-dot--error { background: #dc2626; border-color: #991b1b; }
.osn-phone-dot--busy { background: #16a34a; border-color: #15803d; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); animation: osn-phone-pulse 1.4s ease-out infinite; }
@keyframes osn-phone-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .osn-phone-dot--busy { animation: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35); } }
.osn-phone-row { display: flex; gap: 8px; margin-top: 4px; }
.osn-phone-row .octo-input { flex: 1 1 auto; min-width: 0; }
.osn-phone-title { display: flex; justify-content: space-between; gap: 12px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-phone-name { margin-top: 4px; font-size: var(--osn-fs-sub); font-weight: 600; overflow-wrap: anywhere; }
.osn-phone-number, .osn-phone-state { font-size: var(--osn-fs-text); color: var(--octo-c-muted, #626973); }
.osn-phone-timer { font-variant-numeric: tabular-nums; }
.osn-phone-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.osn-phone-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.osn-phone-hint { width: 300px; max-width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-hint); }
.osn-phone--incoming .osn-phone-call { border-color: var(--octo-c-accent, #e09000); }
@media (max-width: 480px) { .osn-phone { right: 8px; bottom: 8px; } .osn-phone-panel, .osn-phone-call, .osn-phone-hint { width: calc(100vw - 16px); } }

/* Ranking, tab "Manual rating" (hub change H1): heading of a field of the classification and the mark of a stored value that is no longer in the value list (H3) */
.octo-manual-field-head { margin: 20px 0 8px; font-size: var(--osn-fs-sub, 1rem); font-weight: 600; color: var(--octo-c-text); }
.octo-manual-stray { font-weight: 400; color: var(--octo-c-muted, #626973); }
/* ranking page tabs "Lead scoring" and "Documentation", found when the crawl began to open them: the tones of the dots and of negative points on the light surfaces
   (yellow 1.7:1, orange 2.6:1, red 3.4:1) are darker tones that the dark scheme mixes up through --octo-ink like every text colour */
.octo-ranking-dot.is-yellow { color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-ranking-dot.is-orange { color: color-mix(in srgb, #c2410c var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-ranking-dot.is-red, .octo-ranking-points-negative { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }

/* ---- user menu in the sidebar footer (shell/UserMenu.tsx) ----
   The gear (row 4) opens the menu upwards. The menu is a card of the page
   (card, border, text and tint roles switch with the colour scheme); the footer row sits on the dark sidebar. */
.osn-user-row { display: flex; align-items: center; }
.osn-foot-end-row .octo-btn.octo-btn--icon { margin-right: 0; }
.osn-user-disc { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; border: 2px solid var(--osn-user-color, var(--octo-c-link, #006b95)); border-radius: 50%; background: var(--octo-c-card-head, #f7f9fb); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-badge, 0.6875rem); font-weight: 600; line-height: 1; }

/* ---- sidebar footer rows (shell/SidebarFooter.tsx, UserMenu.tsx): 1 telephony state and chat button, 2 initials, name and sign out,
   3 account label (special accounts only), 4 gear and version. The footer sits on the dark sidebar, its icon buttons take the sidebar text pair. ---- */
.osn-foot-status-row, .osn-foot-user, .osn-foot-account-row, .osn-foot-end-row { gap: 8px; margin-top: 8px; }
.osn-foot-status-row { min-height: 28px; justify-content: flex-start; margin-top: 12px; }
.osn-foot-user { margin-top: 10px; }
.osn-foot-user { align-items: center; }
.osn-foot-name { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
/* the state dot of the telephony button: same place and size as the online dot of the chat, colour of the phase */
.osn-foot-state { position: absolute; bottom: 2px; right: 2px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: #9ca3af; border: 2px solid var(--octo-c-sidebar, #1f2937); }
.osn-foot-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
/* the same meaning colours as the dot of the phone window, on the dark sidebar */
.osn-foot-dot--online { background: #22c55e; }
.osn-foot-dot--connecting { background: #f59e0b; }
.osn-foot-dot--busy { background: #22c55e; animation: osn-phone-pulse 1.4s ease-out infinite; }
.osn-foot-dot--offline, .osn-foot-dot--error { background: #ef4444; }
.osn-foot-account { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--osn-btn-primary-bg); color: var(--osn-btn-primary-text); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.03em; }
:root .octo-sidebar-footer .octo-btn.octo-btn--icon { flex: none; position: relative; color: var(--octo-c-sidebar-text, #d1d5db); }
:root .octo-sidebar-footer .octo-btn.octo-btn--icon:hover:not(:disabled), :root .octo-sidebar-footer .octo-btn.octo-btn--icon[aria-expanded="true"] { background: var(--octo-c-sidebar-hover, #374151); color: var(--octo-c-on-dark, #ffffff); }
.osn-foot-online { position: absolute; bottom: 2px; right: 2px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: #22c55e; border: 2px solid var(--octo-c-sidebar, #1f2937); }
:root .octo-sidebar-footer .octo-btn.octo-btn--icon.is-online { color: var(--octo-c-on-dark, #ffffff); }
/* the symbols of the sidebar footer: the glass square on the dark sidebar (it is dark in both schemes, so the glass is a light veil, visible in light and dark), all of one size and one distance */
:root .octo-sidebar-footer .osn-foot-status-row .octo-btn.octo-btn--icon {
    flex: 0 1 32px; width: auto; height: 32px; min-width: 26px; min-height: 32px; padding: 0;
    background: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 24%, transparent);
    color: var(--octo-c-sidebar-text, #d1d5db);
}
:root .octo-sidebar-footer .osn-foot-status-row .octo-btn.octo-btn--icon:hover:not(:disabled), :root .octo-sidebar-footer .osn-foot-status-row .octo-btn.octo-btn--icon[aria-expanded="true"] {
    background: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 18%, transparent); border-color: color-mix(in srgb, var(--octo-c-on-dark, #ffffff) 40%, transparent); color: var(--octo-c-on-dark, #ffffff);
}
.osn-foot-status-row { justify-content: flex-start; gap: 8px; flex-wrap: nowrap; }
.osn-foot-status-row > .osn-user-row { flex: 0 1 32px; min-width: 26px; display: flex; }
:root .octo-sidebar-footer .osn-foot-status-row > .osn-user-row > .octo-btn.octo-btn--icon { flex: 1 1 auto; }
.osn-foot-status-row > span:empty { display: none; }
.osn-foot-badge { position: absolute; top: -4px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #1a1200; font-size: 0.6875rem; font-weight: 700; line-height: 1; box-sizing: border-box; }
.osn-foot-legal { margin: 8px 0 0; font-size: var(--osn-fs-badge, 0.6875rem); color: var(--octo-c-sidebar-text, #d1d5db); }
.osn-foot-legal a { color: inherit; text-decoration: underline; }
.osn-foot-legal a:hover { color: var(--octo-c-on-dark, #ffffff); }
/* compact density: the account row is hidden; the name stays visible (it wraps as in standard) */
[data-octo-density="compact"] .osn-foot-account-row { display: none; }

.osn-user-menu { position: fixed; z-index: 1200; box-sizing: border-box; max-height: calc(100vh - 24px); overflow-y: auto; padding: 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); box-shadow: 0 8px 24px var(--octo-c-shadow, rgba(0, 0, 0, 0.05)), 0 2px 6px var(--octo-c-shadow, rgba(0, 0, 0, 0.05)); }
.osn-user-menu-head { display: flex; align-items: center; gap: 12px; padding: 8px; }
.osn-user-menu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osn-user-menu-name { font-size: var(--osn-fs-text, 0.875rem); font-weight: 600; overflow-wrap: anywhere; }
.osn-user-menu-mail { font-size: var(--osn-fs-body, 0.8125rem); color: var(--octo-c-muted, #626973); overflow-wrap: anywhere; }
.osn-user-menu-chip { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--octo-c-quiet-border, rgba(0, 107, 149, 0.25)); border-radius: 10px; background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); color: var(--octo-c-quiet-text, #006b95); font-size: var(--osn-fs-badge, 0.6875rem); font-weight: 600; line-height: 1.4; }
.osn-user-menu-sep { height: 1px; margin: 8px 0; background: var(--octo-c-border, #e5e7eb); }
.osn-user-menu .osn-user-menu-item { display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--octo-c-text, #111827); font: inherit; font-size: var(--osn-fs-text, 0.875rem); font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; }
.osn-user-menu .osn-user-menu-item--sub { min-height: 32px; padding: 6px 12px 6px 28px; font-size: var(--osn-fs-body, 0.8125rem); font-weight: 400; }
.osn-user-menu .osn-user-menu-item:hover, .osn-user-menu .osn-user-menu-item:focus-visible { color: var(--octo-c-text, #111827); background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); outline: 0; }
.osn-user-menu .osn-user-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--octo-c-link, #006b95); }
.osn-profile-area { scroll-margin-top: 16px; }
@media (max-width: 1200px) { .osn-profile-area { scroll-margin-top: 72px; } }

/* The dialog "Calendar of ..." on the users page shows the blocks of the calendar panel; appointments.css is not loaded on that page. */
#octo-user-calendar-modal .octo-config-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--octo-c-border); }
#octo-user-calendar-modal .octo-config-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
#octo-user-calendar-modal .octo-config-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--octo-c-text); margin: 0 0 10px; }
#octo-user-calendar-modal .octo-config-title .dashicons { font-size: 18px; width: 18px; height: 18px; color: color-mix(in srgb, #006899 var(--octo-ink, 100%), var(--octo-c-text)); }
#octo-user-calendar-modal .octo-config-description { font-size: 13px; color: var(--octo-c-muted); margin: 0 0 10px; }
#octo-user-calendar-modal .octo-config-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#octo-user-calendar-modal .octo-radio-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--octo-c-text); }
#octo-user-calendar-modal .octo-cpanel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* the floating clock of the user (TimerBar in the shell, module Projects): bottom left beside the sidebar, clear of the chat button at the bottom right; it can be moved and the place is kept
   (is-placed: left and top are set by the script); paused it stands still and says so */
.opj-timerbar { position: fixed; z-index: 900; bottom: 16px; left: 276px; display: flex; align-items: center; gap: 12px; box-sizing: border-box; max-width: calc(100vw - 380px); padding: 8px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-size: var(--osn-fs-text); touch-action: none; }
.opj-timerbar.is-placed { bottom: auto; }
.opj-timer-grip { flex: none; cursor: grab; touch-action: none; }
.opj-timer-grip:active { cursor: grabbing; }
.opj-timer-grip:focus-visible { outline: 2px solid var(--octo-c-link, #006b95); outline-offset: 1px; }
.opj-timer-pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); animation: opj-pulse 1.6s ease-in-out infinite; }
.opj-timerbar.is-paused .opj-timer-pulse { animation: none; background: var(--octo-c-muted, #626973); }
.opj-timer-clock { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.opj-timer-subject { text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--octo-c-link, #006b95); }
@keyframes opj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .opj-timer-pulse { animation: none; } }
@media (max-width: 1200px) {
	.opj-timerbar { left: 12px; max-width: calc(100vw - 100px); }
}

/* mailing reports: a number that opens its contacts, totals, step badges, the width of a bar of the flow breakdown */
.osn-drill-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.osn-drill-link:hover { text-decoration: underline; }
.octo-reports-table tr.osn-total-row td { font-weight: 600; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-report-meta { color: var(--octo-c-muted, #6b7280); font-size: 0.8125rem; margin: 0 0 1rem; }
.osn-stat-sub { color: var(--octo-c-muted, #6b7280); font-size: 0.8125rem; font-weight: 400; }
.osn-link-label { display: block; }
.osn-link-url { display: block; color: var(--octo-c-muted, #6b7280); font-size: 0.6875rem; word-break: break-all; }
.osn-flow-off { color: var(--octo-c-muted, #6b7280); }
.osn-conversion-badge { margin-left: 0.5rem; padding: 1px 8px; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; background: var(--octo-c-accent, #e09000); color: var(--octo-c-accent-text, #1a1200); }
.osn-funnel-w { width: var(--osn-w, 100%); }
.osn-drill-pages { margin-right: auto; color: var(--octo-c-muted, #6b7280); font-size: 0.8125rem; }
/* the list of contacts behind a number: a dialog over the page */
.osn-drill-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); }
.osn-drill-box { display: flex; flex-direction: column; width: 90%; max-width: 720px; max-height: 80vh; padding: 1.5rem; border-radius: 8px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.osn-drill-header h3 { margin: 0 0 1rem; font-size: 0.95rem; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-drill-body { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 1rem; }
.osn-drill-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
/* flow editor: the numbers of the steps and the strip of the flow */
.osn-flow-stats-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card, #fff); font-size: 0.8125rem; color: var(--octo-c-text, #111827); }
.osn-flow-stats-strip b { font-weight: 600; }
.osn-flow-stats-strip select { margin-left: auto; }
.osn-flow-node-stats { display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: 0.6875rem; color: var(--octo-c-muted, #6b7280); }
.octo-reports-subtabs { flex-wrap: wrap; }
.osn-report-links { display: flex; gap: 1rem; align-items: center; }
.osn-flow-stats-strip select.octo-input { flex: 0 0 11rem; }
.osn-campaign-filter { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 0.8125rem; }
.osn-campaign-filter select.octo-input { flex: 0 0 18rem; }
.osn-drill-note { margin: 0 0 1rem; color: var(--octo-c-muted, #6b7280); font-size: 0.8125rem; }
/* Newsletters (E-mails > Newsletters): list, edit page, detail page. Status chips are tinted by meaning like the TK survey chips. */
.osn-nl-status { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid transparent; border-radius: 9999px; font-size: var(--osn-fs-badge); font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.osn-nl-status--draft { background: color-mix(in srgb, #f3f4f6 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #374151 var(--octo-ink, 100%), var(--octo-c-text)); border-color: var(--octo-c-border, #e5e7eb); }
.osn-nl-status--scheduled { 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)); }
.osn-nl-status--sending { 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-nl-status--sent { background: color-mix(in srgb, #dcfce7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-nl-status--cancelled { 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-nl-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.osn-nl-toolbar-left, .osn-nl-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.osn-nl-toolbar-left { flex: 1 1 auto; min-width: 0; }
.osn-nl-filter { flex: 0 1 170px; min-width: 0; }
.osn-nl-filter--search { flex: 1 1 200px; max-width: 280px; }
.osn-nl-sub { display: block; margin-top: 2px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-nl-list td { vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; word-break: normal; hyphens: none; }
/* narrow screens: the columns keep a readable width instead of letting the row of buttons take the room (a date or a title never breaks inside a word) */
@media (min-width: 701px) {
    .osn-nl-list th:nth-child(1), .osn-nl-list td:nth-child(1) { min-width: 200px; }
    .osn-nl-list th:nth-child(2), .osn-nl-list td:nth-child(2) { min-width: 110px; }
    .osn-nl-list th:nth-child(3), .osn-nl-list td:nth-child(3) { min-width: 90px; }
    .osn-nl-list th:nth-child(4), .osn-nl-list td:nth-child(4) { min-width: 150px; }
    .osn-nl-list th:nth-child(5), .osn-nl-list td:nth-child(5) { min-width: 110px; }
}
.osn-nl-actions-head, .osn-nl-actions { text-align: right; }
.osn-nl-actions-inner { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 300px; margin-left: auto; }
.osn-nl-actions { width: 1%; }
@media (min-width: 701px) {
    /* the cell keeps the width of its buttons: the generic cell rules (normal wrapping, 200 px) would push them over the status column */
    .osn-nl-list td.osn-nl-actions { max-width: none; min-width: 200px; }
}
.osn-nl-actions-inner .octo-btn { margin: 0; white-space: nowrap; flex: none; }
.osn-nl-empty { padding: 32px 24px; text-align: center; }
.osn-nl-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.osn-nl-modes { margin-bottom: 12px; }
.osn-nl-conditions { margin: 8px 0 12px; }
.osn-nl-count { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--octo-c-quiet-border, rgba(0, 107, 149, 0.25)); border-radius: 6px; background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); color: var(--octo-c-text, #111827); }
.osn-nl-count strong { font-size: var(--osn-fs-card); }
.osn-nl-count small { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
/* wide dialog: the list has ten columns; the page stylesheet of the e-mails fixes every dialog at 500 px, so the width needs !important; the body scrolls, head and foot stay */
#osn-nl-recipients.octo-modal > .octo-modal-content { position: relative; top: auto; left: auto; transform: none; width: min(1200px, calc(100vw - 32px)) !important; max-width: none !important; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
#osn-nl-recipients .octo-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.osn-nl-count-actions { margin-top: 8px; }
/* The shared pager (tools/common.tsx) takes its shape from contacts.css, which pages like the newsletter do not load; without it the buttons were bare text. Colours come from the select role in native-roles.css. */
.osn-tools-pager.octo-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.osn-tools-pager .octo-pagination-info { color: var(--octo-c-muted, #6b7280); font-size: 0.875rem; }
.osn-tools-pager .octo-pagination-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.osn-tools-pager .octo-pagination-btn { padding: 0.5rem 1rem; 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; }
.osn-tools-pager .octo-pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.osn-nl-rcp-search { margin-bottom: 12px; }
.osn-nl-rcp-table td, .osn-nl-rcp-table th { vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.osn-nl-rcp-row { cursor: pointer; }
.osn-nl-rcp-back { margin-bottom: 12px; }
.osn-nl-rcp-card .osn-nl-facts { display: block; }
.osn-nl-rcp-fact { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 16px; padding: 8px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-nl-rcp-fact dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .osn-nl-rcp-fact { grid-template-columns: 1fr; gap: 2px; } }
.osn-nl-batch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 24px; font-size: var(--osn-fs-text); }
.osn-nl-batch .osn-nl-num { flex: 0 0 96px; }
.osn-nl-batch .osn-nl-unit { flex: 0 0 140px; }
.osn-nl-facts { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 16px; margin: 0; font-size: var(--osn-fs-text); }
.osn-nl-facts dt { color: var(--octo-c-muted, #626973); }
.osn-nl-facts dd { margin: 0; overflow-wrap: anywhere; }
.osn-nl-progress { display: block; width: 100%; height: 10px; margin: 8px 0 12px; }
@media (max-width: 700px) { .osn-nl-facts { grid-template-columns: 1fr; gap: 2px; } .osn-nl-facts dd { margin-bottom: 10px; } }

.osn-nl-form-actions { justify-content: flex-end; }
.osn-nl-substep { margin: 24px 0 4px; font-size: var(--osn-fs-card); }
.osn-nl-codes { margin: 12px 0; }
.osn-nl-codes summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.osn-nl-list a, .osn-nl-facts a { color: var(--octo-c-link, #006b95); }

@media (max-width: 700px) {
    .osn-nl-list, .osn-nl-list tbody, .osn-nl-list tr, .osn-nl-list td { display: block; width: auto; }
    .osn-nl-list thead { display: none; }
    .osn-nl-list tr { padding: 12px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); }
    .osn-nl-list td { padding: 2px 0; border: 0; }
    .osn-nl-list td[data-label]::before { content: attr(data-label) ': '; color: var(--octo-c-muted, #626973); font-size: var(--osn-fs-hint); }
    .osn-nl-actions { text-align: left; padding-top: 8px; }
    .osn-nl-actions-inner { justify-content: flex-start; flex-wrap: wrap; }
}
/* list of the pages that still show a form of the previous system (campaigns page) */
.osn-embed-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }

/* Newsletters: view switch and the rounds of a recurring newsletter */
.osn-nl-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.osn-nl-rounds { margin: 0; padding: 0 0 0 18px; }
.osn-nl-rounds li { margin: 4px 0; }
.osn-nl-list td.osn-nl-nowrap { white-space: nowrap; }
/* edit lock: the banner above an editor that someone else is editing, and the read-only look of its content */
.octo-content.osn-lock-banner > .octo-email-settings-msg.is-warning { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.osn-lock-actions { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.osn-readonly { pointer-events: none; user-select: none; opacity: 0.6; }
.osn-plain-mode { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.osn-plain-option { display: inline-flex; align-items: center; gap: 8px; font-size: var(--osn-fs-text); cursor: pointer; }
.osn-plain-area { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--osn-fs-text); }
.osn-plain-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.osn-lock-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--osn-fs-badge); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.5); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); white-space: nowrap; }
.osn-head-actions { display: inline-flex; flex-wrap: wrap; gap: 12px; }
/* the rendered preview of an e-mail: the mail is a white page, whatever the scheme of the interface */
.osn-msg-preview { margin: 8px 0 16px; }
.osn-msg-preview-frame { display: block; width: 100%; height: 520px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: #ffffff; }
.osn-start-when { display: grid; gap: 12px; margin: 12px 0; }
.osn-start-when-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
.osn-start-when .octo-form-group { margin: 0; }
.osn-start-when label.osn-plain-option { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.osn-start-when .osn-plain-option input { width: auto; flex: none; margin: 0; }
/* Presence (column "Status" of the user list): a dot AND a word; the dot colours are fixed meaning colours, the words follow the scheme */
.octo-status-dot.is-gray { background: var(--octo-c-faint, #9ca3af); }
.osn-presence { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.osn-presence .octo-status-dot { flex: none; }
.osn-presence__area { color: var(--octo-c-muted, #6b7280); }
.osn-presence__area::before { content: "\00b7"; margin-right: 8px; }
.osn-presence-switch { margin-top: 16px; }
/* sort button in a table head: reads like the other heads */
.octo-table th .octo-btn.osn-users-sort, .octo-table th .octo-btn.osn-users-sort:hover { padding-left: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; }
/* ---- shared tab bar (settings/parts.tsx Tabs): scrolls inside itself, never widens the page ---- */
.osn-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; min-width: 0; scrollbar-width: thin; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--octo-c-border, #e5e7eb); }
.osn-tab { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.osn-tab:hover { color: var(--octo-c-text, #111827); }
.osn-tab:focus-visible { outline: 2px solid var(--octo-c-accent, #e09000); outline-offset: -2px; }

/* the tab bar inside the field panels of the form editor: the one bar, tighter spacing */
.osn-tabs.osn-fb-tabs { margin: 0 0 10px; }
.osn-fb-tabs .osn-tab { padding: 6px 14px; font-size: var(--osn-fs-hint); }

/* ---- shared key figure tile (StatTile / StatGrid) ---- */
.osn-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 0 0 20px; }
.osn-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; margin: 0; }
.osn-stat-label { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-stat-value { font-size: var(--osn-fs-title); font-weight: 600; line-height: 1.2; color: var(--octo-c-text, #111827); }
.osn-stat-hint { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }

/* ---- shared empty state (EmptyState) ---- */
.osn-empty { padding: 24px 16px; text-align: center; color: var(--octo-c-muted, #626973); font-size: var(--osn-fs-text); }
.osn-empty p { margin: 0; }
.osn-empty .dashicons { display: block; margin: 0 auto 8px; font-size: 24px; width: 24px; height: 24px; }
.osn-tab .dashicons { width: 16px; height: 16px; font-size: 16px; margin-right: 6px; vertical-align: -3px; }
.osn-tab-count { margin-left: 6px; padding: 0 7px; border-radius: 9999px; background: var(--octo-c-card-head, #f7f9fb); font-size: var(--osn-fs-hint); font-weight: 500; color: var(--octo-c-muted, #626973); }

/* the title of a list: on a phone the toolbar sits at the bottom, so the title stands on top of the page */
.osn-list-title { display: none; }
@media (max-width: 768px) {
	.osn-list-title { display: block; margin: 0 0 12px; font-size: var(--osn-fs-title); font-weight: 700; }
	.octo-contacts-toolbar { max-width: 100%; }
	/* C20: two rows instead of one squeezed row: the search field has its own row (it was a blank 25 px box), the switches and buttons below keep their whole label */
	.octo-contacts-toolbar .octo-toolbar-right { flex-wrap: wrap; min-width: 0; max-width: 100%; }
	.octo-contacts-toolbar .octo-toolbar-right > * { min-width: 0; }
	.octo-contacts-toolbar .octo-search-input { flex: 1 1 100%; min-width: 0; order: -1; }
	.osn-filter-customers { flex: 0 1 auto; padding: 0.4rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }
}
.osn-stat.is-good .osn-stat-hint, .osn-stat.is-good:not(:has(.osn-stat-hint)) .osn-stat-value { color: color-mix(in srgb, #15803d var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-stat.is-warn .osn-stat-hint, .osn-stat.is-warn:not(:has(.osn-stat-hint)) .osn-stat-value { color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.osn-stat.is-bad .osn-stat-hint, .osn-stat.is-bad:not(:has(.osn-stat-hint)) .osn-stat-value { color: color-mix(in srgb, #b91c1c var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-card-body > .osn-stat-grid:last-child { margin-bottom: 0; }

.osn-stat-value a { color: inherit; text-decoration: none; }
.osn-stat-value a:hover { text-decoration: underline; }
.osn-stat-hint .dashicons { width: 14px; height: 14px; font-size: 14px; vertical-align: -3px; }

.octo-reports-hint { margin: 12px 0; }
.osn-empty { font-style: normal; }
.osn-ap-grid .octo-day { min-width: 0; overflow-wrap: anywhere; }
/* contract documents (F61): the two tables scroll sideways on a phone; words are not torn apart, the action buttons wrap as a group at the right */
:root .osn-cd-table { min-width: 760px; }
:root .osn-cd-table th .octo-btn { white-space: nowrap; }
:root .osn-cd-table th, :root .osn-cd-table td { overflow-wrap: normal; word-break: normal; }
:root .osn-cd-table td.osn-cd-actions { min-width: 300px; }
:root .osn-cd-table td.osn-cd-actions .osn-tools-actionbuttons { margin-left: 0; }
/* dialog of a document template: the hint below the description and the text keeps its distance to the field (check:ui glued, 0 px before) */
#octo-template-form .octo-form-group > .description { margin: 6px 0 0; }
/* quick search of the frame */
.osn-quick-search { padding: 10px 12px 4px; }
.osn-quick-search-input { width: 100%; box-sizing: border-box; }
.osn-quick-search-results { margin-top: 6px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--octo-sb-border, var(--octo-c-border, #e5e7eb)); border-radius: 6px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); }
.osn-quick-search-note { margin: 0; padding: 8px 10px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-quick-search-title { padding: 6px 10px 2px; font-size: var(--osn-fs-hint); font-weight: 600; color: var(--octo-c-muted, #626973); text-transform: none; }
.osn-quick-search-group ul { margin: 0; padding: 0 0 4px; list-style: none; }
.osn-quick-search-group a { display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; color: inherit; text-decoration: none; }
.osn-quick-search-group a:hover, .osn-quick-search-group a:focus-visible { background: var(--octo-c-page, #f3f4f6); }
.osn-quick-search-name { font-weight: 500; overflow-wrap: anywhere; }
.osn-quick-search-detail { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); overflow-wrap: anywhere; }
/* report tabs and boxes: a row of filters, and a row of buttons that sits on the right */
.osn-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
.octo-content .osn-filter-row select.octo-input, .octo-content .osn-filter-row input.octo-input { width: auto; min-width: 160px; flex: 0 1 240px; }
.octo-content .osn-filter-row input[type="search"].octo-input { flex: 1 1 200px; }
.osn-filter-row .octo-btn { margin-left: auto; }
.osn-filter-row .octo-btn.osn-no-push { margin-left: 0; }
/* the contact filter of the journal: the search of the calendar page inside the row of filters */
.osn-activities-contact { flex: 0 1 240px; min-width: 200px; }
.osn-activities-contact .octo-proposal-contact-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #fff); font-size: 13px; color: var(--octo-c-text, #111827); }
.osn-activities-contact .octo-proposal-contact-pill .octo-proposal-clear-contact { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.osn-actions-right { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.octo-reports-table-card > .octo-field-hint { margin: 12px 16px 16px; }
.osn-emails-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.osn-import-map select { min-width: 200px; max-width: 100%; }
.osn-import-warnings { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.osn-split-results { width: 100%; font-size: 13px; }
.osn-split-results th, .osn-split-results td { padding: 4px 8px; text-align: left; }
.osn-split-results tr.is-leader th { color: var(--octo-c-link, #006B95); }
.osn-split-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.osn-webhook-result { margin-top: 8px; }
.osn-webhook-ok { color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); font-size: 13px; }
/* the dialogs of the flow files: the page of the campaigns hides every .octo-modal until it is marked open, these two are shown by their own state */
#osn-flow-import.octo-modal, #osn-flow-save-template.octo-modal { align-items: center; justify-content: center; opacity: 1; }
.osn-webhook-test .octo-proposal-contact-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #fff); font-size: 13px; color: var(--octo-c-text, #111827); }
.osn-webhook-test .octo-proposal-contact-pill .dashicons { width: 16px; height: 16px; font-size: 16px; color: var(--octo-c-link, #006B95); }
.osn-webhook-test .octo-proposal-contact-pill .octo-proposal-contact-name { font-weight: 600; }
.osn-webhook-test .octo-proposal-clear-contact { padding: 0 2px; border: 0; background: none; color: var(--octo-c-muted, #626973); font-size: 18px; line-height: 1; cursor: pointer; }

/* the file choice of the flow import: the native control is hidden, a button and the name of the file stand in its place */
.osn-flow-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.osn-flow-file-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
/* box "Privacy" of the contact: consent to be shown on the website (social proof) */
.osn-display-consent { margin-top: 12px; }
.osn-display-consent-meta { color: var(--octo-c-muted, #626973); }
.osn-display-consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* tab "Social proof" of the tracking page */
.osn-proof-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 1rem; align-items: start; }
.osn-proof-form .osn-proof-wide { grid-column: 1 / -1; }
.osn-proof-form fieldset { border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 0.375rem; margin: 0 0 1rem; padding: 0.5rem 0.75rem; }
.osn-proof-form legend { font-size: 0.8rem; font-weight: 500; padding: 0 0.25rem; }
.osn-proof-form fieldset .octo-tracking-checkbox-label { display: block; margin: 0.25rem 0; }
.osn-proof-form .octo-tracking-field input[type="number"], .osn-proof-form .octo-tracking-field textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--octo-c-input-border, #e5e7eb); border-radius: 0.375rem; font-size: 0.875rem; background: var(--octo-c-input, #ffffff); color: var(--octo-c-text, #111827); }
.osn-proof-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0; }
.osn-proof-preview { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 0.375rem; background: var(--octo-c-card, #ffffff); }
.osn-proof-preview h4 { margin: 0 0 8px; font-size: var(--osn-fs-sub); }
.osn-proof-preview ul { margin: 0; padding-left: 1.2rem; }
.osn-proof-code { margin: 0; padding: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 0.375rem; background: var(--octo-c-card-head, #f3f4f6); font-size: 0.8125rem; }

/* a search field under a description (system roles) and the title of a search box (logger): air to what follows */
.octo-content p.description.osn-roles-lead { margin: 0 0 12px; }
.dcs-search-box > h3 { margin: 0 0 8px; }
/* a list of addresses or websites in a settings card shows its rows (the general field height of 32 px would show one line of it) */
:root textarea.octo-input.osn-lines { height: auto; min-height: 5.5rem; }
/* the mark of a user who is hidden in choices stands under the name, so that a long name does not push it out of the cell */
.osn-users-name .osn-keys-badge { display: flex; width: fit-content; margin: 4px 0 0; }

/* ---- answers of a settings card (Notice): their look lived in the stylesheet of today's e-mail settings, which most pages do not load, so "Saved" stood as bare
   text (API keys, 24.10.2026). Success is the green glass chip of the other dialogs, the other kinds are tinted boxes; on every page the same. */
.octo-email-settings-msg { display: block; margin-top: 12px; font-size: var(--osn-fs-text); line-height: 1.5; }
.octo-email-settings-msg.is-success { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 12px; border-radius: 9999px; border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.12); color: color-mix(in srgb, #065f46 var(--octo-ink, 100%), var(--octo-c-text)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-weight: 500; }
.octo-email-settings-msg.is-success::before { content: "\f147"; font-family: dashicons; font-size: 16px; line-height: 1; }
.octo-email-settings-msg.is-error { padding: 10px 16px; border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-email-settings-msg.is-warning { padding: 10px 16px; border-radius: 6px; border: 1px solid rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-email-settings-msg.is-info { padding: 10px 16px; border-radius: 6px; border: 1px solid rgba(0, 107, 149, 0.3); background: rgba(0, 107, 149, 0.08); color: var(--octo-c-text, #111827); }
/* a row of the API keys: the buttons 12 px below the hint (not 20), and no space of the last row under the card on top of the padding of the card */
.octo-form-group:has(> input[id^="octo-apikey-"]) > .octo-form-actions { margin-top: 12px; }
.octo-card-body > .octo-smtp-form-grid:last-child > .octo-form-group:last-child:has(> input[id^="octo-apikey-"]) { margin-bottom: 0; }
/* simulator of the flow editor: the steps the contact passes, in order; the others step back */
.osn-flow-inner .octo-flow-node.osn-sim-off { opacity: .45; }
.osn-flow-inner .octo-flow-node.osn-sim-on { outline: 2px solid var(--octo-c-link, #006B95); outline-offset: 1px; }
.osn-sim-order { position: absolute; top: -9px; left: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--octo-c-link, #006B95); color: var(--octo-c-card, #fff); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.osn-sim-form { display: grid; gap: 10px; margin-bottom: 14px; }
.osn-sim-form { margin-top: 12px; }
.osn-sim-form .octo-proposal-contact-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card, #fff); font-size: 13px; color: var(--octo-c-text, #111827); }
.osn-sim-form .octo-proposal-contact-pill .dashicons { width: 16px; height: 16px; font-size: 16px; color: var(--octo-c-link, #006B95); }
.osn-sim-form .octo-proposal-contact-pill .octo-proposal-contact-name { font-weight: 600; }
.osn-sim-form .octo-proposal-clear-contact { padding: 0 2px; border: 0; background: none; color: var(--octo-c-muted, #626973); font-size: 18px; line-height: 1; cursor: pointer; }
.osn-sim-summary { margin: 10px 0; font-weight: 600; font-size: 13px; }
.osn-sim-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; }
.osn-sim-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--octo-c-border-soft, #f1f3f5); }
.osn-sim-item:last-child { border-bottom: 0; }
.osn-sim-step { font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-sim-outcome { flex: 1 1 220px; color: var(--octo-c-muted, #626973); }
.osn-sim-arm { width: auto; min-width: 90px; }
.osn-sim-item.is-would_skip .osn-sim-outcome, .osn-sim-item.is-condition_not_met .osn-sim-outcome { font-style: italic; }
/* flow editor on a phone: the header and the toolbar wrap (badges in their own row, "Save" stays on the first row at the right) and the panel of a step covers
   the canvas instead of standing beside it. Before, the toolbar was 70 px wider than the editor, which hides overflow: "Save" lay outside it, and once the
   editor scrolled sideways (focus, scrolling into view) so did "Save step" and "Delete" of the panel (check:ui 375 px, clipped) */
@media (max-width: 600px) {
    .octo-flow-editor-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
    .octo-flow-editor-header .octo-flow-editor-title, .octo-flow-editor-header .octo-flow-editor-title-input { flex: 1 1 0; min-width: 0; }
    .octo-flow-editor-header .octo-flow-editor-status { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
    .octo-flow-toolbar, .octo-flow-toolbar-group { flex-wrap: wrap; row-gap: 4px; }
    .octo-flow-toolbar { padding: 4px 12px; }
    .octo-flow-editor-body > .octo-flow-settings, .octo-flow-editor-body > .octo-flow-settings.osn-settings-wide, .octo-flow-editor-body > .octo-flow-settings.osn-settings-mid { position: absolute; inset: 0; z-index: 5; width: auto; max-width: none; border-left: 0; }
}
.osn-drag-handle { cursor: grab; color: var(--octo-c-muted, #626973); align-self: center; }

/* column heads that sort the table of the analysis */
.osn-sortable { cursor: pointer; user-select: none; }
.osn-sortable:hover, .osn-sortable:focus-visible { text-decoration: underline; }
/* banner of the due task reminders (ReminderPush): top right above the page, stays until closed */
.osn-reminders { position: fixed; top: 16px; right: 24px; z-index: 1100; box-sizing: border-box; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 12px 14px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; background: var(--octo-c-card, #ffffff); color: var(--octo-c-text, #111827); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: var(--osn-fs-text); }
.osn-reminders-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--osn-fs-text); }
.osn-reminders-head .dashicons { color: var(--octo-c-accent, #e09000); }
.osn-reminders-head strong { font-size: var(--osn-fs-text); font-weight: 600; }
.osn-reminders-count { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--octo-c-quiet-bg, #f3f4f6); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-badge); line-height: 18px; }
.osn-reminders-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.osn-reminder { display: flex; align-items: flex-start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-reminder:first-child { padding-top: 0; border-top: 0; }
.osn-reminder-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; color: var(--octo-c-text, #111827); text-decoration: none; }
.osn-reminder-title { font-size: var(--osn-fs-text); font-weight: 600; overflow-wrap: anywhere; }
.osn-reminder-time { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #6b7280); }
.osn-reminder-contact { flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--osn-fs-hint); color: var(--octo-c-link, #2563eb); }
.osn-reminder-close { flex: none; }
/* below 1200 px the fixed mobile header (60 px) and the drawer of the navigation stand on top: the banner sits under the header and below both */
@media (max-width: 1200px) {
    .osn-reminders { top: 72px; right: 16px; z-index: 1050; max-height: calc(100vh - 88px); }
}

/* ---- the bell (shell/Bell.tsx): the window with the groups reminders, appointments, messages, notices. Roles only: card, border, text and muted switch with the scheme. ---- */
.osn-bell { display: flex; flex-direction: column; gap: 20px; font-size: var(--osn-fs-text); color: var(--octo-c-text, #111827); }
.osn-bell-note { margin: 0; color: var(--octo-c-muted, #626973); }
.osn-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 16px; text-align: center; color: var(--octo-c-muted, #626973); }
.osn-bell-empty strong { font-size: var(--osn-fs-sub); font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-bell-group { min-width: 0; }
.osn-bell-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--osn-fs-text); font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-bell-group-count { padding: 0 8px; border-radius: 999px; background: var(--octo-c-quiet-bg, #f3f4f6); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-badge); font-weight: 600; line-height: 18px; }
.osn-bell-hint { margin: 0 0 8px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-bell-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); }
.osn-bell-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-bell-item:first-child { border-top: 0; }
.osn-bell-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; color: var(--octo-c-text, #111827); text-decoration: none; }
.osn-bell-link:hover .osn-bell-title, .osn-bell-link:focus-visible .osn-bell-title { text-decoration: underline; }
.osn-bell-title { font-weight: 600; overflow-wrap: anywhere; }
.osn-bell-meta, .osn-bell-text { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); overflow-wrap: anywhere; }
.osn-bell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.osn-bell .osn-bell-select.octo-input { width: auto; flex: 0 1 190px; min-width: 0; min-height: 32px; }

/* ---- CC / BCC fields of the writing window: addresses as chips in one field, suggestions under it ---- */
.osn-recipient-anchor { position: relative; }
.osn-recipient-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; min-height: 40px; border: 1px solid var(--osn-field-border, var(--octo-c-border)); border-radius: 0.5rem; background: var(--osn-field-bg, var(--octo-c-card)); cursor: text; }
.osn-recipient-box:focus-within { border-color: var(--octo-c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--octo-c-accent) 10%, transparent); }
.octo-form-group .osn-recipient-box input.osn-recipient-input[type="text"] { flex: 1 1 160px; width: auto; min-width: 120px; padding: 4px 2px; border: 0; background-color: transparent !important; box-shadow: none; color: var(--octo-c-text); }
.octo-form-group .osn-recipient-box input.osn-recipient-input[type="text"]:focus { border: 0; box-shadow: none; }
.octo-chip.osn-recipient-chip { cursor: default; color: var(--octo-c-text, inherit); padding-right: 3px; max-width: 100%; }
.osn-recipient-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .octo-modal .osn-recipient-chip .octo-btn.octo-btn--icon.octo-btn--sm { min-height: 20px; width: 20px; padding: 0; flex: 0 0 auto; }
:root .octo-modal .osn-recipient-chip .octo-btn.octo-btn--icon.octo-btn--sm .dashicons { font-size: 14px; width: 14px; height: 14px; }
.osn-recipient-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; max-height: 240px; overflow-y: auto; border: 1px solid var(--osn-field-border, var(--octo-c-border)); border-radius: 0.5rem; background: var(--octo-c-card); box-shadow: 0 6px 18px color-mix(in srgb, var(--octo-c-text, currentColor) 18%, transparent); }
.osn-recipient-option { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; cursor: pointer; }
.osn-recipient-option.is-active, .osn-recipient-option:hover { background: var(--osn-select-bg); }
.osn-recipient-option-name { font-weight: 600; }
.osn-recipient-option-detail { font-size: var(--osn-fs-hint); opacity: 0.75; }
.osn-recipient-notice { display: block; margin-top: 4px; }
.osn-compose-copies-toggle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 8px; }
:root .octo-modal .octo-form-group.osn-compose-copies-toggle .octo-btn { width: auto; flex: 0 0 auto; }

/* Own navigation: Design > Navigation (default of the tenant) and Profile > My navigation (same editor) */
.osn-navedit-switch { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--octo-c-border); border-radius: 6px; background: var(--octo-c-page); }
.osn-navedit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.osn-navedit-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.osn-navedit-list { display: flex; flex-direction: column; gap: 6px; }
.osn-navedit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: var(--octo-c-card); border: 1px solid var(--octo-c-border); border-radius: 6px; cursor: grab; }
.osn-navedit-row:focus-visible { outline: 2px solid var(--octo-c-accent); outline-offset: 1px; }
.osn-navedit-row.is-sub { background: var(--octo-c-page); }
.osn-navedit-row.is-hidden .osn-navedit-label { color: var(--octo-c-muted); text-decoration: line-through; }
.osn-navedit-label { flex: 1 1 140px; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--octo-c-text); display: flex; flex-direction: column; }
.osn-navedit-note { font-size: 0.8rem; font-weight: 400; color: var(--octo-c-muted); }
.osn-navedit-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.osn-navedit-move { width: auto; max-width: 180px; padding-top: 4px; padding-bottom: 4px; }
.osn-navedit-row > .osn-navedit-subwrap { flex: 1 0 100%; padding-left: 28px; }
.osn-navedit-sub { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.osn-navedit-group { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--octo-c-border); border-radius: 8px; padding: 8px; background: var(--octo-c-page); }
.osn-navedit-grouphead { display: flex; flex-direction: column; gap: 8px; }
.osn-navedit-groupedit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px; }
.osn-navedit-groupedit .octo-input { flex: 1 1 180px; max-width: 280px; }
.osn-navedit-icons { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 0 100%; padding: 8px; border: 1px solid var(--octo-c-border); border-radius: 6px; background: var(--octo-c-card); }
.osn-navedit-groupbody { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 24px; }
.osn-navedit-empty { margin: 0; font-size: 0.8125rem; color: var(--octo-c-muted); }
.osn-navedit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--octo-c-border); }
:root .osn-navedit .octo-btn.octo-btn--icon[aria-pressed="true"]:not(:disabled), :root .osn-navedit-icons .octo-btn.octo-btn--icon.is-selected { background: var(--osn-select-bg); border-color: var(--osn-select-border); color: var(--octo-c-text); }
.osn-navedit-preview h3 { margin: 0 0 8px; font-size: 0.875rem; color: var(--octo-c-text); }
.osn-navedit-preview { position: sticky; top: 16px; }
/* the preview is the real sidebar markup on the fixed dark surface of the sidebar */
.osn-navprev { background: var(--octo-c-sidebar, #1f2937); border-radius: 8px; padding: 8px 0; max-height: 70vh; overflow-y: auto; }
.osn-navprev { --octo-nav-size: 0.95rem; }
.osn-navprev .octo-nav { padding: 0; }
.osn-navprev .octo-nav-link, .osn-navprev .octo-nav-submenu-link { cursor: default; }
/* the mark "new" next to an item that appeared since the layout was made: fixed colours, like the counts */
.osn-nav-new { margin-left: auto; padding: 0 0.45rem; border-radius: 999px; font-size: 0.7rem; line-height: 1.2rem; background: rgba(255, 255, 255, 0.18); color: var(--octo-c-on-dark, #ffffff); text-transform: uppercase; letter-spacing: 0.03em; }
.octo-nav-link .osn-nav-new + .octo-nav-arrow, .octo-nav-submenu-link .osn-nav-new + .octo-nav-submenu-group-arrow { margin-left: 0.5rem; }
@media (max-width: 900px) {
    .osn-navedit-layout { grid-template-columns: minmax(0, 1fr); }
    .osn-navedit-preview { position: static; }
    .osn-navedit-groupbody { margin-left: 8px; }
    .osn-navedit-tools { margin-left: 0; width: 100%; }
    .osn-navedit-row > .osn-navedit-subwrap { padding-left: 0; }
}

/* "Only run when…" as the condition filter of today: the logic above the rules, each rule field, condition and value in one framed row */
.osn-rc { display: flex; flex-direction: column; gap: 10px; }
.osn-rc-logic { width: 100%; }
.osn-rc-rule { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--octo-c-border, #e2e8f0); border-radius: 6px; background: var(--octo-c-card-head, #f9fafb); }
.osn-rc-rule > select, .osn-rc-rule > input { padding: 7px 10px; border: 1px solid var(--octo-c-border, #e2e8f0); border-radius: 6px; background: var(--octo-c-card, #fff); color: var(--octo-c-text, #334155); font-size: 13px; min-width: 0; box-sizing: border-box; margin: 0; }
.osn-rc-rule > .osn-rc-field { flex: 1 1 calc(100% - 50px); }
.osn-rc-rule > .osn-rc-remove { flex: 0 0 auto; }
.osn-rc-rule > .osn-rc-op { flex: 0 0 150px; }
.osn-rc-rule > .osn-rc-value { flex: 1 1 120px; }

/* a category that takes a dragged flow or e-mail: outlined in the accent */
.octo-category.is-drop-target { outline: 2px dashed var(--octo-c-accent, #e09000); outline-offset: 2px; }
.octo-flow-item[draggable="true"] { cursor: grab; }
/* the box of the thresholds in the step "Calculate ranking" (render_octo_calculate_ranking) */
.osn-rank-limits { padding: 10px 12px; border-radius: 6px; background: var(--octo-c-card-head, #f8f9fa); }
.osn-rank-limits-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.osn-rank-limits-row > span { display: inline-flex; align-items: center; gap: 4px; }
.osn-rank-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
/* the colours of the traffic light are meanings, as .osn-ranking-dot */
.osn-rank-dot.green { background: #22c55e; }
.osn-rank-dot.yellow { background: #e8ce09; }
.osn-rank-dot.red { background: #800000; }
/* the newsletter in steps as today (templates/emails/newsletter.php, octo-news-accordion): a numbered head with the choice, the body only while open */
.osn-nl-steps { padding: 0; overflow: hidden; margin-bottom: 16px; }
.osn-nl-step + .osn-nl-step { border-top: 1px solid var(--octo-c-border, #e5e7eb); }
:root .osn-nl-step .osn-nl-step-head.octo-btn { display: flex; /* a legacy rule sets the width of every .octo-btn with !important */ width: 100% !important; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; color: var(--octo-c-text); text-align: left; font-weight: 600; box-shadow: none; }
:root .osn-nl-step .osn-nl-step-head.octo-btn:hover:not(:disabled) { background: var(--octo-c-card-head, #f9fafb); }
.osn-nl-step-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--octo-c-card-head, #f3f4f6); border: 1px solid var(--octo-c-border, #e5e7eb); color: var(--octo-c-text); font-size: 14px; font-weight: 600; }
.osn-nl-step.is-open .osn-nl-step-num { background: var(--octo-c-accent); border-color: var(--octo-c-accent); color: var(--octo-c-accent-text); }
.osn-nl-step.is-done:not(.is-open) .osn-nl-step-num { color: var(--octo-c-accent-glyph); }
.osn-nl-step-num .dashicons { width: 18px; height: 18px; font-size: 18px; line-height: 18px; }
.osn-nl-step-title { flex: 1; min-width: 0; font-size: 14px; }
.osn-nl-step-sum { max-width: 320px; overflow: hidden; color: var(--octo-c-muted); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.osn-nl-step-sum.is-optional { font-style: italic; }
.osn-nl-step-chev { flex-shrink: 0; color: var(--octo-c-muted); transition: transform 0.2s; }
.osn-nl-step.is-open .osn-nl-step-chev { transform: rotate(90deg); }
.osn-nl-step-body { padding: 0 16px 16px 60px; }
.osn-nl-step-next { display: flex; justify-content: flex-end; }
/* the parts of a step keep the spacing of a card: one rhythm between hint, choices, groups and buttons, a select and its button side by side */
.osn-nl-step-body > * + * { margin-top: 16px; }
.osn-nl-step-body > p.octo-field-hint { margin-bottom: 0; }
.osn-nl-step-body .octo-form-group + .octo-form-group { margin-top: 16px; }
.osn-nl-step-body .osn-nl-inline { align-items: center; }
.osn-nl-step-body .osn-nl-inline > select.octo-input { flex: 1 1 260px; width: auto; }
.osn-nl-step-body .octo-check-row + .octo-check-row { margin-top: 8px; }
@media (max-width: 640px) { .osn-nl-step-body { padding-left: 16px; } .osn-nl-step-sum { display: none; } }

/* Customer mails in the record (A0c): the timeline rows, the dialog that opens a mail, the page "All mails" */
.osn-cmail-dir { margin-right: 6px; color: var(--octo-c-muted, #6b7280); vertical-align: middle; }
.osn-cmail-meta { font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); margin-bottom: 10px; }
.osn-cmail-text { white-space: pre-wrap; margin: 0; padding: 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; font-family: inherit; font-size: 0.875rem; color: var(--octo-c-text, #111827); }
.osn-cmail-files { margin-top: 12px; font-size: 0.875rem; }
.osn-cmail-files ul { list-style: none; margin: 4px 0 0; padding: 0; }
.osn-cmail-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.osn-cmail-filters .octo-form-group { margin: 0; min-width: 160px; }
.osn-cmail-table td { vertical-align: top; }
.osn-cmail-snippet { display: block; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); }

/* The acquisition letter with AI (A0j): the letter next to the dossier it was written against, in the approval view */
.osn-ai-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.osn-ai-review h4 { margin: 0 0 8px; }
.osn-ai-review p { margin: 0 0 8px; overflow-wrap: anywhere; }
.osn-ai-issues { margin: 0 0 8px; padding-left: 18px; }
.osn-ai-dossier p { margin: 0 0 8px; }
@media (max-width: 760px) { .osn-ai-review { grid-template-columns: minmax(0, 1fr); } }

/* the contact choice of a company in a dialog (new contract, offer, invoice): the pages that do not load the invoice stylesheet draw it the same way (roles, no fixed colours) */
.octo-inv-contacts-list { margin-bottom: 8px; }
.octo-inv-contact-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; }
.octo-inv-contact-item:hover { background: color-mix(in srgb, var(--octo-c-accent) 8%, var(--octo-c-card)); }
.octo-inv-contact-item.selected { background: color-mix(in srgb, var(--octo-c-link) 12%, var(--octo-c-card)); }
.octo-inv-contact-radio { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--octo-c-border); flex-shrink: 0; }
.octo-inv-contact-item.selected .octo-inv-contact-radio { border-color: var(--octo-c-link); background: var(--octo-c-link); box-shadow: inset 0 0 0 3px var(--octo-c-card); }
.octo-inv-contact-name { font-size: 13px; font-weight: 600; color: var(--octo-c-text); }
.octo-inv-contact-email { font-size: 0.8rem; color: var(--octo-c-muted); margin-left: auto; }
.octo-inv-default-check { display: flex; align-items: center; gap: 6px; padding: 2px 0 10px 22px; font-size: 0.8rem; color: var(--octo-c-muted); }

/* mail editor: the row "Show as" of the preview (A9) */
.osn-showas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; background: var(--octo-c-card, #fff); }
.osn-showas-label { font-weight: 600; margin: 0; }
.osn-showas-contact { flex: 1 1 220px; min-width: 200px; }
.osn-showas-select { width: auto; min-width: 140px; }
.osn-showas-info { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; font-size: var(--osn-fs-hint, 0.8125rem); color: var(--octo-c-muted, #626973); }
.osn-showas-missing { color: var(--octo-c-text, #111827); font-weight: 600; }

/* e-mails: filter "unused"; superlinks: search, sort, choice for deleting several */
.osn-emails-unused { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-size: var(--osn-fs-hint, 0.8125rem); cursor: pointer; }
.osn-sl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.osn-sl-tools input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.osn-sl-tools select { width: auto; }
.osn-sl-pick { margin: 0 8px 4px 0; vertical-align: middle; }

/* mail editor: global blocks (B13) */
.osn-ee-global { border: 1px dashed var(--octo-c-border, #d1d5db); border-radius: 6px; }
.osn-ee-global-tag { padding: 2px 8px; font-size: var(--osn-fs-hint, 0.75rem); color: var(--octo-c-muted, #626973); border-bottom: 1px dashed var(--octo-c-border, #d1d5db); }
.osn-ee-global-body { pointer-events: none; }
.osn-ee-global-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.osn-ee-global-uses { margin: 4px 0 8px 18px; padding: 0; }

.osn-utm-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 700px) { .osn-utm-row { grid-template-columns: 1fr 1fr; } }

/* newsletters: calendar, progress while planning (B12) */
.osn-nl-cal-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.osn-nl-cal-head strong { min-width: 10rem; text-align: center; }
.osn-nl-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--octo-c-border, #d1d5db); background: var(--octo-c-border, #d1d5db); }
.osn-nl-cal-wd { padding: 6px; text-align: center; font-weight: 600; font-size: var(--osn-fs-hint, 0.8125rem); background: var(--octo-c-card, #fff); color: var(--octo-c-muted, #626973); }
.osn-nl-cal-day { min-height: 92px; padding: 4px 6px; background: var(--octo-c-card, #fff); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.osn-nl-cal-day.is-other { opacity: 0.55; }
.osn-nl-cal-num { font-size: var(--osn-fs-hint, 0.75rem); color: var(--octo-c-muted, #626973); }
.osn-nl-cal-item { display: block; padding: 2px 4px; border-radius: 4px; font-size: var(--osn-fs-hint, 0.75rem); color: var(--octo-c-text, #111827); background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.osn-nl-cal-item:hover { background: var(--octo-c-quiet-border, rgba(0, 107, 149, 0.25)); }
.osn-nl-cal-time { font-weight: 600; }
@media (max-width: 700px) { .osn-nl-cal-day { min-height: 64px; padding: 2px 3px; } .osn-nl-cal-item .osn-nl-status { display: none; } }
.osn-nl-planning { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--octo-c-quiet-border, rgba(0, 107, 149, 0.25)); border-radius: 6px; background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); color: var(--octo-c-text, #111827); }
.osn-nl-planning-track { height: 8px; margin-top: 8px; border-radius: 4px; background: var(--octo-c-border, #d1d5db); overflow: hidden; }
.osn-nl-planning-fill { height: 100%; background: var(--octo-c-accent, #e09000); transition: width 0.25s linear; }
/* import and export (B30), key figures and own number (B29), funnel of the ads (B27) */
.osn-import-templates { margin-top: 1rem; }
.osn-import-template-remove { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.osn-export-log { display: block; }
.osn-own-number { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--octo-c-border, #d1d5db); border-radius: 6px; }
.osn-own-number legend { padding: 0 0.4rem; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-ads-buckets { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.5rem 0 1rem; padding: 0; list-style: none; color: var(--octo-c-text, #111827); }
.osn-ads-funnel-platform { margin-top: 1.5rem; }
.osn-chart-funnel svg { display: block; max-width: 100%; }

/* the bar above the records of an own kind of object: search, the trash switch and the button keep their distance (the checkbox used to touch the button) */
.osn-objects-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 12px; }
.osn-objects-bar .octo-input[type="search"] { flex: 1 1 220px; max-width: 360px; }
/*
 * 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 (glass orange: tinted accent, border in the accent, dark text in light and light text in dark)
 *   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)
 *   warning    a follow-up that leads on to other work, e.g. a project from an appointment (tinted glass orange, the accent as a tint; never next to primary in one row of equal weight)
 *   provider   connect button of a third party (Google, Microsoft): fixed blue surface, fixed white text
 * A page never defines its own button colours.
 */
/* ---- accent tokens: the Octoserv defaults. A branded tenant overrides them from the page head (BrandCss); rules that mean "the accent" take these, never a fixed orange. ---- */
:root, [data-octo-theme] {
	/* text and icons in the accent colour on a card or the page: dark orange in the light scheme, mixed with the text colour in the dark one (--octo-ink) */
	--octo-c-accent-ink: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
	/* the deeper shade for text on tints of the accent (glass chips and badges) */
	--octo-c-accent-ink-deep: color-mix(in srgb, #8a5800 var(--octo-ink, 100%), var(--octo-c-text));
}
:root {
	/* the accent on the sidebar, which is dark in both schemes */
	--octo-c-accent-on-dark: #e09000;
	/* text and icons that mean the accent on a card (help icon, hover of a tab): the accent itself; a branded tenant gets a shade that reads on the card of each scheme */
	--octo-c-accent-glyph: var(--octo-c-accent);
}
: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;
	/* body text inside a box section (13px): smaller than the section heading above it, larger than the muted hints */
	--osn-fs-body: 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, #241603);
	/* the primary BUTTON is glass orange like every other role (29.10.2026); the solid accent tokens above stay for badges and fixed surfaces */
	--osn-btn-primary-glass-bg: color-mix(in srgb, var(--octo-c-accent, #e09000) 30%, transparent);
	--osn-btn-primary-glass-bg-hover: color-mix(in srgb, var(--octo-c-accent, #e09000) 45%, transparent);
	--osn-btn-primary-glass-border: var(--octo-c-accent, #e09000);
	--osn-btn-primary-glass-border-hover: color-mix(in srgb, var(--octo-c-accent, #e09000) 80%, #000);
	--osn-btn-primary-glass-text: #3d2400;
	--osn-btn-primary-glass-text-hover: #241603;
	--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));
	/* secondary: blue in both schemes (approved 26.10.2026) */
	--osn-btn-secondary-bg: #e6f2f7;
	--osn-btn-secondary-bg-hover: #d1e7f1;
	--osn-btn-secondary-border: #006b95;
	--osn-btn-secondary-border-hover: #00547a;
	--osn-btn-secondary-text: #003450;
	--osn-btn-secondary-text-hover: #00263b;
	/* neutral: grey, for Cancel/Close (29.10.2026); orange stays the action colour */
	--osn-btn-neutral-bg: #eef0f3;
	--osn-btn-neutral-bg-hover: #e1e4e9;
	--osn-btn-neutral-border: #6b7280;
	--osn-btn-neutral-border-hover: #4b5563;
	--osn-btn-neutral-text: #1f2937;
	--osn-btn-neutral-text-hover: #111827;
	/* danger */
	--osn-btn-danger-bg: #fdecec;
	--osn-btn-danger-bg-hover: #fad4d4;
	--osn-btn-danger-border: #b42318;
	--osn-btn-danger-border-hover: #8f1c12;
	--osn-btn-danger-text: #7a1a10;
	--osn-btn-danger-text-hover: #5c120b;
	/* success */
	--osn-btn-success-bg: #e7f6ee;
	--osn-btn-success-bg-hover: #cdebdb;
	--osn-btn-success-border: #1e8e4f;
	--osn-btn-success-border-hover: #176f3d;
	--osn-btn-success-text: #0e5a30;
	--osn-btn-success-text-hover: #0a4424;
	/* warning: the accent as a tint, a solid border like the other glass roles */
	--osn-btn-warning-bg: #fff3dc;
	--osn-btn-warning-bg-hover: #ffe5b3;
	--osn-btn-warning-border: #b87400;
	--osn-btn-warning-border-hover: #8f5a00;
	--osn-btn-warning-text: #4a2e00;
	--osn-btn-warning-text-hover: #331f00;
	/* inputs, selects, textareas: a flat, quiet surface that differs clearly from every button */
	--osn-field-bg: #f4f7f9;
	--osn-field-border: #c9d6de;
	--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);
}

/* dark scheme: tinted glass in the hue of the role (approved 26.10.2026); primary keeps its fixed accent surface and dark text */
:root[data-octo-theme="dark"] {
	--osn-btn-secondary-bg: rgba(79, 165, 201, 0.18);
	--osn-btn-secondary-bg-hover: rgba(79, 165, 201, 0.28);
	--osn-btn-secondary-border: rgba(79, 165, 201, 0.55);
	--osn-btn-secondary-border-hover: rgba(79, 165, 201, 0.75);
	--osn-btn-secondary-text: #cdeaf6;
	--osn-btn-secondary-text-hover: #e6f5fb;
	--osn-btn-neutral-bg: rgba(255, 255, 255, 0.08);
	--osn-btn-neutral-bg-hover: rgba(255, 255, 255, 0.15);
	--osn-btn-neutral-border: rgba(255, 255, 255, 0.35);
	--osn-btn-neutral-border-hover: rgba(255, 255, 255, 0.55);
	--osn-btn-neutral-text: #e5e7eb;
	--osn-btn-neutral-text-hover: #f9fafb;
	--osn-btn-primary-glass-bg: color-mix(in srgb, var(--octo-c-accent, #e09000) 32%, transparent);
	--osn-btn-primary-glass-bg-hover: color-mix(in srgb, var(--octo-c-accent, #e09000) 46%, transparent);
	--osn-btn-primary-glass-border: var(--octo-c-accent, #e09000);
	--osn-btn-primary-glass-border-hover: color-mix(in srgb, var(--octo-c-accent, #e09000) 80%, #fff);
	--osn-btn-primary-glass-text: #ffe0a3;
	--osn-btn-primary-glass-text-hover: #fff1d6;
	--osn-btn-danger-bg: rgba(248, 113, 113, 0.18);
	--osn-btn-danger-bg-hover: rgba(248, 113, 113, 0.28);
	--osn-btn-danger-border: rgba(248, 113, 113, 0.65);
	--osn-btn-danger-border-hover: rgba(248, 113, 113, 0.85);
	--osn-btn-danger-text: #ffd9d9;
	--osn-btn-danger-text-hover: #fff0f0;
	--osn-btn-success-bg: rgba(34, 197, 94, 0.18);
	--osn-btn-success-bg-hover: rgba(34, 197, 94, 0.28);
	--osn-btn-success-border: rgba(74, 222, 128, 0.6);
	--osn-btn-success-border-hover: rgba(74, 222, 128, 0.8);
	--osn-btn-success-text: #d3f8e0;
	--osn-btn-success-text-hover: #ecfdf3;
	--osn-btn-warning-bg: rgba(224, 144, 0, 0.18);
	--osn-btn-warning-bg-hover: rgba(224, 144, 0, 0.28);
	--osn-btn-warning-border: rgba(224, 144, 0, 0.6);
	--osn-btn-warning-border-hover: rgba(224, 144, 0, 0.8);
	--osn-btn-warning-text: #f3c978;
	--osn-btn-warning-text-hover: #ffe0a3;
	--osn-field-bg: rgba(0, 0, 0, 0.3);
	--osn-field-border: rgba(255, 255, 255, 0.14);
}

/* ---- 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 var(--octo-c-accent); 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-glass-bg);
	border-color: var(--osn-btn-primary-glass-border);
	color: var(--osn-btn-primary-glass-text);
}
:root .octo-btn.octo-btn--primary:hover:not(:disabled) {
	background: var(--osn-btn-primary-glass-bg-hover);
	border-color: var(--osn-btn-primary-glass-border-hover);
	color: var(--osn-btn-primary-glass-text-hover);
}
:root .octo-btn.octo-btn--secondary {
	background: var(--osn-btn-secondary-bg);
	border-color: var(--osn-btn-secondary-border);
	color: var(--osn-btn-secondary-text);
}
:root .octo-btn.octo-btn--secondary:hover:not(:disabled) {
	background: var(--osn-btn-secondary-bg-hover);
	border-color: var(--osn-btn-secondary-border-hover);
	color: var(--osn-btn-secondary-text-hover);
}
:root .octo-btn.octo-btn--neutral {
	background: var(--osn-btn-neutral-bg);
	border-color: var(--osn-btn-neutral-border);
	color: var(--osn-btn-neutral-text);
}
:root .octo-btn.octo-btn--neutral:hover:not(:disabled) {
	background: var(--osn-btn-neutral-bg-hover);
	border-color: var(--osn-btn-neutral-border-hover);
	color: var(--osn-btn-neutral-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);
}
:root .octo-btn.octo-btn--danger:hover:not(:disabled) {
	background: var(--osn-btn-danger-bg-hover);
	border-color: var(--osn-btn-danger-border-hover);
	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);
}
:root .octo-btn.octo-btn--success:hover:not(:disabled) { background: var(--osn-btn-success-bg-hover); border-color: var(--osn-btn-success-border-hover); color: var(--osn-btn-success-text-hover); }
:root .octo-btn.octo-btn--warning {
	background: var(--osn-btn-warning-bg);
	border-color: var(--osn-btn-warning-border);
	color: var(--osn-btn-warning-text);
}
:root .octo-btn.octo-btn--warning:hover:not(:disabled) { background: var(--osn-btn-warning-bg-hover); border-color: var(--osn-btn-warning-border-hover); color: var(--osn-btn-warning-text-hover); }
: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); }
/* a ghost link keeps its role colour in every link state: the browser's visited/active link colours and any page-level `a` rule must not win (measured 7.7:1 or more in dark on page, card, tinted card and row-hover grounds) */
:root a.octo-btn.octo-btn--ghost:visited,
:root a.octo-btn.octo-btn--ghost:active,
:root a.octo-btn.octo-btn--ghost:focus-visible { color: var(--octo-c-link, #006b95); }
:root .octo-btn.octo-btn--icon {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	min-width: 32px;
	padding: 0;
	background: var(--osn-btn-secondary-bg);
	border-color: var(--osn-btn-secondary-border);
	color: var(--osn-btn-secondary-text);
}
/* the symbol button is the glass square of the offers area (decision 29.10.2026: one look for every symbol button of the application, blue glass, red for delete; no grey and no bare symbol) */
:root .octo-btn.octo-btn--icon:hover:not(:disabled) { background: var(--osn-btn-secondary-bg-hover); border-color: var(--osn-btn-secondary-border-hover); color: var(--osn-btn-secondary-text-hover); }
:root .octo-btn.octo-btn--icon.octo-btn--danger { background: var(--osn-btn-danger-bg); border-color: var(--osn-btn-danger-border); 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); border-color: var(--osn-btn-danger-border-hover); color: var(--osn-btn-danger-text-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; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.octo-content .octo-form-actions > .octo-btn { flex: 0 0 auto; width: auto; }
.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; }

/* ---- spacing and card head of the shared building blocks (settings/parts.tsx): one rule for every page, independent of which page stylesheet is loaded ---- */
/* card head: the orange section bar and 16 px to the content (the SMTP page of today; the bar used to come only from smtp-styles.css, which only some pages load) */
.octo-content .octo-card > .octo-card-header { border-left: 3px solid var(--octo-c-accent); padding-left: 17px; margin-bottom: 16px; }
.octo-content .octo-card > .octo-card-body { margin-top: 0; }
/* label above a control: 8 px; a hint under a control: 4 px; a hint under chips or a button: 8 px */
.octo-content .octo-form-group > label:not(.octo-checkbox-label) { display: block; margin-bottom: 8px; }
.octo-content .octo-form-group > .octo-field-hint { display: block; margin-top: 4px; }
.octo-content .octo-form-group > :is(.octo-chip-list, .octo-btn, .osn-row-fields) + .octo-field-hint { margin-top: 8px; }
.octo-content .octo-form-group > .osn-row-fields + .octo-btn { margin-top: 8px; }
.octo-content .octo-form-group > label + .octo-btn { margin-top: 2px; }
/* a row of controls or a checkbox row after a note or a control is 8 px away from it */
:is(.octo-content, .octo-main, .octo-modal, .osn-step-settings) :is(.description, .osn-note-faint, p.octo-field-hint) + :is(.osn-row-fields, .osn-tax-row) { margin-top: 8px; }
:is(.octo-content, .octo-main, .octo-modal) .octo-form-group > :is(input:not([type="hidden"]), select, textarea, .octo-input) + .octo-check-row { margin-top: 8px; }
/* the first checkbox row after a grid or a note in a card body: 12 px */
:is(.octo-content, .octo-main) .octo-card-body > :not(.octo-check-row) + .octo-check-row { margin-top: 12px; }
/* a hint directly under a control is 4 px away, wherever the control sits */
:is(.octo-content, .octo-main, .octo-modal) :is(input:not([type="hidden"]), select, textarea, .octo-input) + :is(small.octo-field-hint, p.octo-field-hint, p.octo-form-hint) { display: block; margin-top: 4px; }
/* text after a control inside a card body: 8 px; a list or a box after a sentence: 12 px; a toolbar above a card: 20 px */
.octo-content .octo-card-body > :not(p.octo-field-hint, .octo-chip-list) + p.octo-field-hint { margin-top: 8px; }
.octo-content .octo-card-body > .octo-chip-list + p.octo-field-hint { margin-top: 12px; }
.octo-content .octo-card-body > p + .octo-data-list { margin-top: 12px; }
.octo-content .octo-form-actions + .octo-card { margin-top: 20px; }
.octo-content .octo-field-value { font-weight: 600; }
/* links in the content that are no buttons use the link colour of the theme (zero specificity: a class-based rule stays in charge) */
:where(.octo-content a:not(.octo-btn), .octo-content a:not(.octo-btn):visited) { color: var(--octo-c-link); text-underline-offset: 2px; }
/* checkboxes and radios: the blue of the brand like today's .octo-checkbox, never the browser default */
:where(.octo-content, .octo-modal, [role="dialog"]) :is(input[type="checkbox"], input[type="radio"]) { accent-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text)); }

/* ---- buttons on a fixed dark surface (custom-field category header, log console): a role on a FIXED surface must be a fixed pair, here the dark-scheme pair of the role ---- */
.osn-cf-group-header .octo-btn.octo-btn--secondary,
.dcs-log-container .octo-btn.octo-btn--secondary { background: rgba(79, 165, 201, 0.18); border-color: rgba(79, 165, 201, 0.55); color: #cdeaf6; }
.osn-cf-group-header .octo-btn.octo-btn--secondary:hover:not(:disabled),
.dcs-log-container .octo-btn.octo-btn--secondary:hover:not(:disabled) { background: rgba(79, 165, 201, 0.28); border-color: rgba(79, 165, 201, 0.75); color: #e6f5fb; }
.osn-cf-group-header .octo-btn.octo-btn--icon { background: transparent; border-color: transparent; color: var(--octo-c-on-dark, #ffffff); }
.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--ghost,
.osn-cf-group-header a.octo-btn.octo-btn--ghost:visited { color: var(--octo-c-on-dark, #ffffff); }
.osn-cf-group-header .octo-btn.octo-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
.osn-cf-group-header .octo-btn.octo-btn--danger { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.65); color: #ffd9d9; }
.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 = light blue tint like a selected row (--osn-select-*), never orange ---- */
.octo-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.octo-chip { position: relative; 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: var(--osn-select-bg); border-color: var(--osn-select-border); color: var(--octo-c-text, #111827); font-weight: 600; }
.octo-chip:focus-within { outline: 2px solid var(--octo-c-accent); 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;
}

/* ---- 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) 50%, #ffffff); border-color: color-mix(in srgb, var(--octo-status) 80%, #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; text-align: right; }
.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;
}
/* the answer "Saved" is the green glass chip (native.css), not a box: under the buttons of a field it stands at their right edge */
.octo-content .octo-email-settings-msg.is-success,
.octo-modal .octo-email-settings-msg.is-success { padding: 4px 12px; border-radius: 9999px; }
.octo-content .octo-form-group > .octo-email-settings-msg.is-success { display: flex; width: fit-content; margin-left: auto; }

/* 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;
}

/* Section heading inside a box (14px, 600, text colour): always larger than the body text (13px) and the hints (12.8px) that follow it. The crawl
   checks the order (heading font size must not be smaller than the next sibling's). The weight needs !important: body.octo-dashboard * forces 400 on everything. */
.octo-box-section-title,
body.octo-dashboard .octo-box-section-title { margin: 0; font-size: var(--osn-fs-sub); font-weight: 600 !important; line-height: 1.4; color: var(--octo-c-text); }

/* a status select without a status has no colour of its own: it is a plain select of the scheme (the pastel chip with dark text is for a chosen status) */
:root select.octo-status-chip:not([style*="--octo-status"]) { background-color: var(--octo-c-input, #ffffff); border-color: var(--octo-c-border, #e5e7eb); color: var(--octo-c-text, #111827); }
/* the buttons of a list row keep their air */
.octo-table td.octo-actions { display: table-cell; white-space: nowrap; }
.octo-table td.octo-actions .octo-btn + .octo-btn { margin-left: 6px; }
/* open and delete of a list row: small square buttons; green and red come from the role tokens */
.octo-table td.octo-actions .octo-btn { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 0.375rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
.octo-table td.octo-actions .octo-btn .dashicons { font-size: 18px; width: 18px; height: 18px; margin: 0; }

/* ---- one dialog: tinted head, button row at the right end (cancel left of the main action) ---- */
.octo-modal .octo-modal-content > .octo-modal-header { background: var(--octo-c-card-head, #f7f9fb); }
.octo-modal .octo-modal-content .octo-modal-footer,
.octo-modal .octo-modal-content .octo-modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
/* a button row that is a direct part of the dialog (not inside its body) keeps the distance to the edge of the dialog; without it the buttons of the confirmation sat in the corner */
.octo-modal .octo-modal-content > .octo-modal-footer,
.octo-modal .octo-modal-content > .octo-modal-actions { padding: 16px 24px 20px; }

/* a page header with actions: the title and the actions share the first row (actions at the right), the description follows */
.octo-content .octo-page-header.has-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.octo-content .octo-page-header.has-actions > h1 { grid-column: 1; grid-row: 1; margin-bottom: 0; } /* the margin of the title would push the centred actions down by half its size */
.octo-content .octo-page-header.has-actions > .osn-page-actions { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.octo-content .octo-page-header.has-actions > .octo-page-description { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; } /* the space the title gave up */

/* a hint under a field or under an "add" button stands on its own line, never beside the button */
.octo-content .octo-form-group > small.octo-field-hint { display: block; margin-top: 8px; }
.octo-content .octo-form-group > .octo-btn { margin-top: 12px; }
.octo-content .octo-form-group > .octo-btn + small.octo-field-hint { margin-top: 12px; }

/* the actions in a box header keep 8 px between them */
.octo-box-header .octo-box-actions { display: inline-flex; align-items: center; gap: 8px; }
/* the help button of a box head is the same as next to a page title: the box head's own icon size (--octo-dv-icon) must not shrink it to a dot */
.octo-detail-box .octo-box-header .octo-help-trigger { top: 0; margin-left: 0; }
.octo-detail-box .octo-box-header .octo-help-trigger .dashicons { font-size: 22px; width: 22px; height: 22px; line-height: 22px; color: var(--octo-c-accent-glyph); }
.octo-content .octo-chip-list + .octo-field-hint { margin-top: 12px; }
.octo-content .octo-ranking-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
/* sliders carry the accent of the application, not the browser blue */
.octo-main input[type="range"] { accent-color: var(--octo-c-accent); }
/* a dialog: one danger action may stand at the start of the row (delete), the rest stays at the right end */
.octo-modal .octo-modal-footer .osn-dialog-start, .octo-modal .octo-modal-actions .osn-dialog-start { margin-right: auto; }
.octo-modal .octo-modal-body > p { margin: 0 0 12px; }
/* the check box of a chip is invisible and never wider than a pixel, whatever a page sets for the inputs of its filter */
:root .octo-chip > input.octo-chip-input { position: absolute; left: 0; top: 0; width: 1px; min-width: 0; max-width: 1px; height: 1px; padding: 0; border: 0; margin: 0; }
.octo-main .owf-box-start { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.octo-main .owf-box-start > .octo-btn { align-self: flex-end; }
.octo-main a .dashicons { text-decoration: none; display: inline-block; }

/* ---- inputs, selects, textareas: one flat surface for the application area, dialogs and panels (approved 26.10.2026). It differs clearly from the buttons (flat, grey-blue,
   hairline border, no tint of a role). Page rules force their own field colours with !important, so this one is !important too; colours only, never the geometry.
   Not for the status chip and the status level: their colour is data (--octo-status, glass of 25.10.2026); the rule had painted over them since 26.10.2026. ---- */
:root :is(.octo-main, .octo-modal, .octo-modal-content, .octo-slide-panel, .octo-slider-panel, [role="dialog"]) :is(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"]):not([type="hidden"]), select, textarea, .octo-input):not(.octo-chip-input):not(.osn-brand-swatch):not(.osn-recipient-input):not(.octo-status-chip):not(.osn-status-level) {
	background-color: var(--osn-field-bg) !important;
	border-color: var(--osn-field-border) !important;
	color: var(--octo-c-text);
}
:root :is(.octo-main, .octo-modal, .octo-modal-content, .octo-slide-panel, .octo-slider-panel, [role="dialog"]) :is(input, select, textarea, .octo-input):focus-visible:not(.octo-chip-input):not(.osn-recipient-input) {
	border-color: color-mix(in srgb, #00689b var(--octo-ink, 100%), var(--octo-c-text)) !important;
}

/* Every date and time field looks like the other fields, also where the page gave it no class (offers, invoices, filters, logs). Low weight on purpose: a page rule or `.octo-input` still wins. */
:where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) {
	box-sizing: border-box;
	min-height: 2.25rem;
	padding: 0.375rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--octo-c-text, #111827);
	background-color: var(--octo-c-card, #ffffff);
	border: 1px solid var(--octo-c-border, #e5e7eb);
	border-radius: 0.375rem;
	color-scheme: light;
}
:where([data-octo-theme="dark"]) :where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) { color-scheme: dark; }
:where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]):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);
}
:where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
:where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]):disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- one row action for every table of the offers area (and anywhere else a row has symbol actions): the glass role with a square face, 34 px; delete is the red glass. The symbol is a dashicon of 18 px.
   A page does not draw its own symbol buttons (owner 29.10.2026: "everywhere other icon buttons"). ---- */
:root .octo-btn.osn-row-icon { width: 34px; min-height: 34px; padding: 0; }
.octo-btn.osn-row-icon .dashicons { margin: 0; font-size: 18px; width: 18px; height: 18px; }
.octo-proposal-row-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }

/* a button in a toolbar keeps its label on one line on a phone (it wrapped to three lines next to the search field: 69 px high) */
@media (max-width: 767px) {
    .octo-toolbar-right > .octo-btn { flex: 0 0 auto; white-space: nowrap; max-width: 100%; }
}