/* Add-on Manager component styles */

/* Material Icons - Self-hosted font */
@font-face {
	font-family: "Material Icons";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/src/fonts/MaterialIcons-Regular.woff2") format("woff2");
}

.rd-addon-menu-icon {
	font-family: "Material Icons";
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
	margin-right: 6px;
	color: #555;
}

.rd-addon-manager {
	padding: 0;
}

.rd-addon-add-menu {
	display: inline;
	width: auto;
	height: auto;
	background-image: none;
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	font-size: 13px;
	color: #d6336c;
	cursor: pointer;
}

.rd-addon-add-menu:hover {
	text-decoration: underline;
}

.rd-addon-add-btn {
	font-size: 12px;
	padding: 4px 10px;
	background: none;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #d6336c;
	cursor: pointer;
	margin-top: 4px;
}

.rd-addon-add-btn:hover {
	border-color: #d6336c;
	background: #f8f9fa;
}

.rd-addon-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	border-color: #ccc;
	color: #999;
}

.rd-addon-empty {
	color: #888;
	font-size: 13px;
	margin-right: 12px;
}

.rd-addon-loading {
	color: #888;
	font-size: 13px;
	padding: 8px 0;
}

.rd-addon-error {
	color: #c0392b;
	font-size: 13px;
	padding: 8px 0;
}

.rd-addon-card {
	border: 1px solid #dde1e6;
	border-left: 3px solid #d6336c;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: #f8f9fa;
}

/* Unified card layout */
.rd-addon-card-unified .rd-addon-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rd-addon-card-unified .rd-addon-card-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #eee;
}

.rd-addon-card-unified .rd-addon-card-row {
	font-size: 12px;
	line-height: 1.4;
}

.rd-addon-card-unified .rd-addon-card-row--price {
	font-weight: 600;
	font-size: 13px;
	color: #333;
}

.rd-addon-card-unified .rd-addon-card-row--conditions {
	font-size: 11px;
	color: #888;
}

/* Config sub-cards (present + future inline) */
.rd-addon-subcard {
	padding: 5px 8px;
	border-radius: 4px;
	background: #f4f6f8;
	border-left: 3px solid var(--rd-green);
}

.rd-addon-subcard + .rd-addon-subcard {
	margin-top: 4px;
	border-top: 1px solid #e8e8e8;
}

.rd-addon-subcard--future {
	border-left-color: var(--rd-blue);
	background: #f0f4ff;
}

.rd-addon-subcard-status {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.rd-addon-subcard-details {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.4;
}

.rd-addon-subcard-price {
	font-weight: 600;
	color: #333;
}

.rd-addon-subcard-meta {
	color: #888;
}

.rd-addon-card-unified .rd-addon-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.rd-addon-card-unified .rd-addon-card-price {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.rd-addon-card-unified .rd-addon-status-badge {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.rd-addon-card-unified .rd-addon-dates {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
}

/* Inherited card variant */
.rd-addon-card--inherited {
	border-left-color: #e67e22;
	background: #fffbf5;
}

.rd-addon-inherited-link {
	font-size: 12px;
	font-weight: 500;
	color: #e67e22;
	text-decoration: none;
	white-space: nowrap;
	padding: 2px 8px;
	border-radius: 3px;
	background: #fff3e0;
	border: 1px solid #ffe0b2;
}

.rd-addon-inherited-link:hover {
	background: #ffe0b2;
	color: #d35400;
	text-decoration: none;
}

.rd-addon-card-row1 {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rd-addon-label {
	font-weight: 600;
	font-size: 13px;
	flex: 1;
	color: #333;
}

.rd-addon-status {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.rd-addon-actions {
	display: flex;
	gap: 2px;
}

.rd-addon-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	padding: 3px 6px;
	line-height: 1;
	color: #333;
	border-radius: 3px;
	opacity: 0.7;
}

.rd-addon-icon-btn:hover {
	color: #d6336c;
	background: #f8f9fa;
	opacity: 1;
}

.rd-addon-icon-btn--danger:hover {
	color: #c0392b;
}

.rd-addon-icon-img {
	width: 14px;
	height: 14px;
	display: block;
}

.rd-addon-card-row2 {
	font-size: 12px;
	color: #888;
	margin-top: 4px;
	display: flex;
	gap: 12px;
}

.rd-addon-card-row3-fee {
	font-size: 12px;
	margin-top: 2px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.rd-addon-fee {
	font-weight: 600;
	font-size: 13px;
	color: #333;
}

.rd-addon-interval {
	color: #888;
	font-size: 12px;
}

.rd-addon-card-row-inherited {
	font-size: 12px;
	color: #e67e22;
	margin-top: 4px;
}

.rd-addon-card-row-inherited a {
	color: #d6336c;
	text-decoration: underline;
}

.rd-addon-edit-form {
	padding: 8px 0;
}

.rd-addon-edit-separator {
	font-weight: 600;
	font-size: 13px;
	color: #333;
	margin-top: 12px;
	margin-bottom: 8px;
	padding-top: 8px;
	border-top: 1px solid #dde1e6;
}

.rd-addon-static-value {
	font-size: 13px;
	color: #888;
	padding: 6px 0;
	display: inline-block;
}

/* ConfigTrack grouping */
.rd-addon-config-track {
	border: 1px solid #dde1e6;
	border-radius: 4px;
	padding: 8px;
	margin-bottom: 8px;
	background: #f8f9fa;
}

.rd-addon-config-track-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.rd-addon-config-track-label {
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.rd-addon-config-track-count {
	font-size: 11px;
	color: #888;
}

.rd-addon-add-future-btn {
	font-size: 11px;
	padding: 3px 8px;
	background: none;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #d6336c;
	cursor: pointer;
	margin-top: 4px;
}

.rd-addon-add-future-btn:hover {
	border-color: #d6336c;
	background: #ffffff;
}

.rd-addon-card--past {
	opacity: 0.6;
	border-left-color: #999;
}

.rd-addon-card--future {
	border-left-color: #007bff;
}

.rd-addon-temporal {
	font-size: 11px;
	white-space: nowrap;
}

/* Summary card in outer view (legacy, now uses .rd-addon-card-unified) */
.rd-addon-summary-card {
	cursor: default;
	background: #f8f9fa;
	border-left-color: #d6336c;
	margin-bottom: 8px;
}

.rd-addon-card-unified .rd-addon-icon-btn {
	color: #d6336c;
	opacity: 0.8;
}

.rd-addon-card-unified .rd-addon-icon-btn:hover {
	opacity: 1;
	background: #fff0f5;
}

.rd-addon-card-unified .rd-addon-icon-img {
	filter: brightness(0) saturate(100%) invert(26%) sepia(63%) saturate(3233%) hue-rotate(326deg) brightness(89%) contrast(89%);
}

.rd-addon-end-date {
	font-size: 12px;
	color: #888;
	white-space: nowrap;
}

.rd-addon-config-count {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
}

/* Track-level dialog */
.rd-addon-track-dialog {
	padding: 8px 0;
}

.rd-addon-track-card {
	border: 1px solid #dde1e6;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 12px;
	background: #f8f9fa;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.rd-addon-track-card--present {
	border-left: 4px solid #28a745;
	background: #ffffff;
}

.rd-addon-track-card--past {
	border-left: 4px solid #999;
	opacity: 0.65;
}

.rd-addon-track-card--future {
	border-left: 4px solid #007bff;
	border-style: dashed;
	border-left-style: solid;
	background: #ffffff;
}

.rd-addon-track-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #f4f6f8;
	border: 1px solid #e8ecef;
}

.rd-addon-track-card--present .rd-addon-track-card-header {
	background: #f0faf4;
	border-color: #c8e6d4;
}

.rd-addon-track-card--future .rd-addon-track-card-header {
	background: #f0f4ff;
	border-color: #c8d8f0;
}

.rd-addon-track-card-temporal {
	font-size: 12px;
	font-weight: 600;
}

.rd-addon-track-card-dates {
	font-size: 12px;
	color: #888;
}

.rd-addon-track-card-pricing {
	margin-left: auto;
	font-size: 12px;
	white-space: nowrap;
}

.rd-addon-track-card-pricing strong {
	color: #333;
}

.rd-addon-track-card-liccount {
	color: #888;
	font-size: 11px;
	margin-left: 4px;
}

.rd-addon-track-card-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 8px;
}

.rd-addon-track-card-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.rd-addon-track-card-col .rd-input-row {
	margin-bottom: 4px;
}

.rd-addon-track-card-col .rd-label-content label {
	font-size: 12px;
	color: #555;
	font-weight: 500;
}

.rd-addon-track-card-addon-config {
	grid-column: 1 / -1;
	margin-top: 4px;
}

/* Gap warning banner between cards */
.rd-addon-track-gap-warning {
	font-size: 11px;
	color: #e67e22;
	background: #fff8e1;
	border: 1px solid #e67e22;
	border-radius: 4px;
	padding: 4px 10px;
	margin-bottom: 4px;
	text-align: center;
}

/* Live validation banners */
.rd-addon-validation-banner {
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 12px;
}

.rd-addon-validation-error {
	background: #fef2f2;
	border: 1px solid #ef4444;
	color: #991b1b;
}

.rd-addon-validation-warning {
	background: #fffbeb;
	border: 1px solid #f59e0b;
	color: #92400e;
}

.rd-addon-validation-msg {
	margin: 2px 0;
}

.rd-addon-validating {
	font-size: 11px;
	color: #6b7280;
	margin-bottom: 8px;
	font-style: italic;
}

/* Error state on individual track cards */
.rd-addon-track-card--error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 1px #ef4444;
}

/* Third button ("Übernehmen und Speichern") in track dialog */
.rd-addon-track-config-dialog .modal_dialog_bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

.rd-addon-track-config-dialog .modal_dialog_bottom > .thirdButton {
	order: 3;
}