/**
 * CCM Dashboard: Appearance-Tokens → UI.
 *
 * Outline-Buttons wie Client Case Manager; Hover = gefüllt.
 * Kein WP-Blau (#2A6B6B).
 */

.ccmdash-appearance-scope {
	--ccmdash-btn-accent: var(--ccmdash-button-bg, var(--ccmdash-primary, #F08060));
	--ccmdash-btn-accent-hover: var(--ccmdash-button-bg-hover, var(--ccmdash-button-bg, var(--zusammen-cta-hover, #E8544F)));
	--ccmdash-btn-on-accent: var(--ccmdash-button-text, #fff);
	--ccmdash-btn-on-accent-hover: var(--ccmdash-button-text-hover, var(--ccmdash-button-text, #fff));
	--ccmdash-btn-border: var(--ccmdash-btn-accent);

	--ccmdash-case-surface: var(--ccmdash-surface, #ffffff);
	--ccmdash-case-bg: var(--ccmdash-surface-alt, var(--zusammen-surface-alt, #D4EDED));
	--ccmdash-case-border: var(--ccmdash-border, #C5DADA);
	--ccmdash-case-text: var(--ccmdash-text, var(--zusammen-text, #4A6A6A));
	--ccmdash-case-muted: var(--ccmdash-text-muted, var(--zusammen-text-muted, #6B8585));
	--ccmdash-case-accent: var(--ccmdash-link, var(--zusammen-link, #2A6B6B));

	color: var(--ccmdash-text, var(--zusammen-text, #4A6A6A));
}

.ccmdash-appearance-scope a:not(.ccm-dashboard-summary-tile),
.ccmdash-appearance-scope .ccm-dashboard-link,
.ccmdash-appearance-scope .ccm-dashboard-online-name a {
	color: var(--ccmdash-link, var(--zusammen-link, #2A6B6B));
}

.ccmdash-appearance-scope a:not(.ccm-dashboard-summary-tile):hover,
.ccmdash-appearance-scope .ccm-dashboard-link:hover,
.ccmdash-appearance-scope .ccm-dashboard-online-name a:hover {
	color: var(--ccmdash-link, #1A4F4F);
}

.ccmdash-appearance-scope .ccm-dashboard-meta,
.ccmdash-appearance-scope .ccm-dashboard-section-desc,
.ccmdash-appearance-scope .ccm-dashboard-empty,
.ccmdash-appearance-scope .ccm-dashboard-online-you,
.ccmdash-appearance-scope .ccm-dashboard-text-muted,
.ccmdash-appearance-scope .ccm-dashboard-ajax-error {
	color: var(--ccmdash-text-muted, var(--zusammen-text-muted, #6B8585));
}

.ccmdash-appearance-scope .ccm-dashboard-ajax-error {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.75rem;
	background: var(--ccmdash-notice-warning-bg, #fff3cd);
	border-left: 3px solid var(--ccmdash-notice-warning-border, #ffc107);
	color: var(--ccmdash-notice-warning-text, #856404);
	border-radius: 0 4px 4px 0;
	font-size: 0.9em;
}

/* Statistik-Kacheln — Text/Icon bleiben auf Hover lesbar (nicht Link-Accent). */
.ccmdash-appearance-scope .ccm-dashboard-summary-tile,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:focus,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:visited {
	background: var(--ccmdash-summary-tile-bg, #2A6B6B);
	color: var(--ccmdash-summary-tile-text, #fff);
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:hover,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:focus-visible {
	background: var(
		--ccmdash-summary-tile-bg-hover,
		#1A4F4F
	);
	color: var(--ccmdash-summary-tile-text, #fff);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
	filter: none;
}

.ccmdash-appearance-scope .ccm-dashboard-summary-tile__title,
.ccmdash-appearance-scope .ccm-dashboard-summary-tile__value,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:hover .ccm-dashboard-summary-tile__title,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:hover .ccm-dashboard-summary-tile__value {
	color: inherit;
}

.ccmdash-appearance-scope .ccm-dashboard-summary-tile__icon,
.ccmdash-appearance-scope a.ccm-dashboard-summary-tile:hover .ccm-dashboard-summary-tile__icon {
	color: var(--ccmdash-summary-tile-icon, #fff);
}

/* Stroke-Icons (fill="none" am SVG) nicht flächig füllen — sonst werden Outline-Pfade zu Vollflächen. */
.ccmdash-appearance-scope .ccm-dashboard-summary-tile__icon svg {
	fill: none;
}

.ccmdash-appearance-scope .ccm-dashboard-summary-tile__icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.ccmdash-appearance-scope .ccm-dashboard-summary-tile__icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

/* Flächen / Listen */
.ccmdash-appearance-scope .ccm-dashboard-section,
.ccmdash-appearance-scope .ccm-dashboard-widget,
.ccmdash-appearance-scope .ccm-dashboard-settings-panel,
.ccmdash-appearance-scope .ccm-dashboard-online-compact {
	background: var(--ccmdash-surface, #fff);
	border-color: var(--ccmdash-border, #C5DADA);
	color: var(--ccmdash-text, var(--zusammen-text, #4A6A6A));
}

.ccmdash-appearance-scope .ccm-dashboard-widget-body .ccm-dashboard-list > .ccm-dashboard-list-item:nth-child(odd) {
	background-color: var(--ccmdash-surface, #fff);
}

.ccmdash-appearance-scope .ccm-dashboard-widget-body .ccm-dashboard-list > .ccm-dashboard-list-item:nth-child(even) {
	background-color: var(--ccmdash-surface-alt, var(--ccmdash-surface-muted, #D4EDED));
}

.ccmdash-appearance-scope .ccm-dashboard-list-item,
.ccmdash-appearance-scope .ccm-dashboard-online-item,
.ccmdash-appearance-scope .ccm-dashboard-online-compact-item {
	border-color: var(--ccmdash-border, #C5DADA);
}

.ccmdash-appearance-scope .ccm-dashboard-widget-placeholder {
	border-color: var(--ccmdash-btn-accent);
	background: color-mix(in srgb, var(--ccmdash-btn-accent) 8%, white);
}

.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="notfallschalter"] .ccm-dashboard-widget-body,
.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="notfallschalter"] .ccm-dashboard-section.ccm-dashboard-notfallschalter,
.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="notfallschalter"] .zusammen-site-switch,
.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="talk"] .ccm-dashboard-widget-body,
.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="talk"] .ccm-dashboard-section.ccm-dashboard-talk {
	background: var(--ccmdash-surface-alt, var(--ccmdash-surface-muted, #d4eded)) !important;
	background-image: none !important;
	color: var(--ccmdash-text, var(--zusammen-text, #4A6A6A));
	border-color: transparent;
}

.ccmdash-appearance-scope .ccm-dashboard-widget[data-widget-id="notfallschalter"] .zusammen-site-switch__status strong {
	display: none !important;
}

/* Formulare */
.ccmdash-appearance-scope input[type="text"],
.ccmdash-appearance-scope input[type="search"],
.ccmdash-appearance-scope select,
.ccmdash-appearance-scope textarea,
.ccmdash-appearance-scope .ccm-dashboard-column-select {
	background: var(--ccmdash-input-bg, #fff);
	color: var(--ccmdash-input-text, var(--zusammen-text, #4A6A6A));
	border-color: var(--ccmdash-input-border, #c3c4c7);
}

.ccmdash-appearance-scope input:focus,
.ccmdash-appearance-scope select:focus,
.ccmdash-appearance-scope textarea:focus,
.ccmdash-appearance-scope .ccm-dashboard-column-select:focus {
	border-color: var(--ccmdash-input-focus, var(--ccmdash-btn-accent));
	outline-color: var(--ccmdash-input-focus, var(--ccmdash-btn-accent));
}

/* ——— Buttons: Outline; Hover = gefüllt ——— */
.ccmdash-appearance-scope .ccm-dashboard-btn:not(.ccm-dashboard-btn--warn):not(.ccm-dashboard-btn--danger),
.ccmdash-appearance-scope .button,
.ccmdash-appearance-scope button.button,
.ccmdash-appearance-scope a.button,
.ccmdash-appearance-scope input[type="submit"],
.ccmdash-appearance-scope input[type="button"] {
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid var(--ccmdash-btn-border) !important;
	border-width: 1px !important;
	border-style: solid !important;
	color: var(--ccmdash-btn-accent) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none;
}

.ccmdash-appearance-scope .ccm-dashboard-btn:not(.ccm-dashboard-btn--warn):not(.ccm-dashboard-btn--danger):hover,
.ccmdash-appearance-scope .ccm-dashboard-btn:not(.ccm-dashboard-btn--warn):not(.ccm-dashboard-btn--danger):focus-visible,
.ccmdash-appearance-scope .button:hover,
.ccmdash-appearance-scope .button:focus-visible,
.ccmdash-appearance-scope button.button:hover,
.ccmdash-appearance-scope a.button:hover,
.ccmdash-appearance-scope input[type="submit"]:hover,
.ccmdash-appearance-scope input[type="button"]:hover {
	background: var(--ccmdash-btn-accent-hover) !important;
	background-color: var(--ccmdash-btn-accent-hover) !important;
	border-color: var(--ccmdash-btn-accent-hover) !important;
	color: var(--ccmdash-btn-on-accent-hover) !important;
	text-decoration: none;
	filter: none;
}

.ccmdash-appearance-scope .ccm-dashboard-btn:focus-visible,
.ccmdash-appearance-scope .button:focus-visible {
	outline: 2px solid var(--ccmdash-btn-accent);
	outline-offset: 2px;
}

.ccmdash-appearance-scope .ccm-dashboard-btn:disabled,
.ccmdash-appearance-scope .ccm-dashboard-btn[disabled],
.ccmdash-appearance-scope .button:disabled,
.ccmdash-appearance-scope .button[disabled] {
	opacity: 0.55 !important;
	cursor: not-allowed;
}

/* FAB / Settings: gefüllt (wie aktiver Zustand) */
.ccmdash-appearance-scope .ccm-dashboard-settings-fab {
	background: var(--ccmdash-btn-accent) !important;
	color: var(--ccmdash-btn-on-accent) !important;
	border: none !important;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.ccmdash-appearance-scope .ccm-dashboard-settings-fab:hover,
.ccmdash-appearance-scope .ccm-dashboard-settings-dock.is-open .ccm-dashboard-settings-fab {
	background: var(--ccmdash-btn-accent-hover) !important;
	color: var(--ccmdash-btn-on-accent-hover) !important;
}

.ccmdash-appearance-scope .ccm-dashboard-settings-fab:focus-visible {
	outline: 2px solid var(--ccmdash-btn-accent);
	outline-offset: 2px;
}

.ccmdash-appearance-scope .ccm-dashboard-settings-fab .dashicons {
	color: inherit;
}

/* Icon-/Chat-Buttons */
.ccmdash-appearance-scope .ccm-dashboard-chat-icon-btn {
	background: var(--ccmdash-surface-muted, #F9EFE6);
	border-color: var(--ccmdash-border, #C5DADA);
	color: var(--ccmdash-text, var(--zusammen-text, #4A6A6A));
}

.ccmdash-appearance-scope .ccm-dashboard-chat-icon-btn:hover {
	background: color-mix(in srgb, var(--ccmdash-btn-accent) 10%, white);
	border-color: var(--ccmdash-btn-accent);
	color: var(--ccmdash-btn-accent);
}

.ccmdash-appearance-scope .ccm-dashboard-chat-icon-btn:focus-visible {
	outline: 2px solid var(--ccmdash-btn-accent);
	outline-offset: 2px;
}

/* Online-Zeilen: keine Theme-Button-Styles (Pill/Hover-Farbe) */
.ccmdash-appearance-scope .ccm-dashboard-online-compact-btn,
.ccmdash-appearance-scope .ccm-dashboard-online-compact-btn:hover,
.ccmdash-appearance-scope .ccm-dashboard-online-compact-btn:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ccmdash-text, #1d2327) !important;
	filter: none !important;
}

.ccmdash-appearance-scope .ccm-dashboard-online-compact-item {
	border-radius: 0 !important;
}

.ccmdash-appearance-scope .ccm-dashboard-online-compact-item:hover,
.ccmdash-appearance-scope .ccm-dashboard-online-compact-item:focus-within {
	background-color: color-mix(in srgb, var(--ccmdash-case-accent, #2A6B6B) 8%, white);
}

.ccmdash-appearance-scope .ccm-dashboard-online-icon-link:hover,
.ccmdash-appearance-scope .ccm-dashboard-online-icon-link:focus-visible {
	color: var(--ccmdash-case-accent, #2A6B6B);
	background: color-mix(in srgb, var(--ccmdash-case-accent, #2A6B6B) 10%, white);
}

.ccmdash-appearance-scope .ccm-dashboard-online-icon-link:focus-visible {
	outline: 2px solid var(--ccmdash-case-accent, #2A6B6B);
	outline-offset: 1px;
}

.ccmdash-appearance-scope .ccm-dashboard-team-badge {
	background: var(--ccmdash-btn-accent, #F08060);
	color: var(--ccmdash-btn-on-accent, #fff);
}

/* Icons */
.ccmdash-appearance-scope .dashicons {
	color: var(--ccmdash-icon, var(--ccmdash-btn-accent));
}

.ccmdash-appearance-scope .ccm-dashboard-btn .dashicons,
.ccmdash-appearance-scope .ccm-dashboard-settings-fab .dashicons,
.ccmdash-appearance-scope .ccm-dashboard-summary-tile .dashicons {
	color: inherit;
}

.ccmdash-appearance-scope .ccm-dashboard-team-badge {
	background: var(--ccmdash-btn-accent, var(--zusammen-cta, #F08060));
	color: var(--ccmdash-btn-on-accent, #fff);
}

.ccmdash-appearance-scope .ccm-dashboard-notice--warning,
.ccmdash-appearance-scope .ccm-dashboard-dep-hint {
	background: var(--ccmdash-notice-warning-bg, #fff3cd);
	border-left: 3px solid var(--ccmdash-notice-warning-border, #ffc107);
	color: var(--ccmdash-notice-warning-text, #856404);
	padding: 0.5rem 0.75rem;
	border-radius: 0 4px 4px 0;
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}

.ccmdash-appearance-scope .ccm-dashboard-notice--info {
	background: var(--ccmdash-notice-info-bg, #D4EDED);
	color: var(--ccmdash-notice-info-text, #1A4F4F);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}