/* KOL Advanced Push Notifications - Frontend Styles */

html.light-mode .kol-push-permission-prompt,
html.dark-mode .kol-push-permission-prompt {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	max-width: 400px;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

html.light-mode .kol-push-permission-prompt {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #1f2937;
}

html.dark-mode .kol-push-permission-prompt {
	background: #1a1a1a;
	border: 1px solid #333333;
	color: #e0e0e0;
}

html.light-mode .kol-push-permission-prompt h4,
html.dark-mode .kol-push-permission-prompt h4 {
	margin: 0 0 10px 0;
	font-size: 16px;
	font-weight: 600;
}

html.light-mode .kol-push-permission-prompt h4 {
	color: #1f2937;
}

html.dark-mode .kol-push-permission-prompt h4 {
	color: #e0e0e0;
}

html.light-mode .kol-push-permission-prompt p,
html.dark-mode .kol-push-permission-prompt p {
	margin: 0 0 15px 0;
	font-size: 14px;
	line-height: 1.5;
}

html.light-mode .kol-push-permission-prompt p {
	color: #4b5563;
}

html.dark-mode .kol-push-permission-prompt p {
	color: #c7c7c7;
}

html.light-mode .kol-push-permission-buttons,
html.dark-mode .kol-push-permission-buttons {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}

html.light-mode .kol-push-permission-btn,
html.dark-mode .kol-push-permission-btn,
html.light-mode .kol-push-preferences button,
html.dark-mode .kol-push-preferences button {
	align-items: center;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	height: 32px;
	justify-content: center;
	line-height: 32px;
	padding: 0 15px;
	text-decoration: none;
}

html.light-mode .kol-push-permission-btn.primary,
html.light-mode .kol-push-save-preferences,
html.dark-mode .kol-push-permission-btn.primary,
html.dark-mode .kol-push-save-preferences {
	background: linear-gradient(#2d7c2d, #1f5f1f);
	border-color: #3d9d3d #1a4d1a #1a4d1a #3d9d3d;
	border-style: solid;
	border-width: 1px;
	color: #ffffff;
}

html.light-mode .kol-push-enable-browser,
html.dark-mode .kol-push-enable-browser {
	background: linear-gradient(#ccfff6, #99ffe8);
	border: 2px solid #00cc99;
	box-shadow: 0 0 0 3px rgba(0, 204, 153, 0.15), 0 4px 8px rgba(0, 204, 153, 0.2);
	color: #007755;
}

html.light-mode .kol-push-permission-btn.secondary,
html.light-mode .kol-push-topic-tools button {
	background: linear-gradient(#e2e2e2, #d4d4d4);
	border-color: #f0f0f0 #b0b0b0 #b0b0b0 #f0f0f0;
	border-style: solid;
	border-width: 1px;
	color: #2d2d2d;
}

html.dark-mode .kol-push-permission-btn.secondary,
html.dark-mode .kol-push-topic-tools button {
	background: linear-gradient(#383838, #343434);
	border-color: #555555 #282828 #282828 #555555;
	border-style: solid;
	border-width: 1px;
	color: #ffffff;
}

html.light-mode .kol-push-preferences,
html.dark-mode .kol-push-preferences {
	border-radius: 6px;
	padding: 18px;
	max-width: 760px;
}

html.light-mode .kol-push-preferences {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #1f2937;
}

html.dark-mode .kol-push-preferences {
	background: #1a1a1a;
	border: 1px solid #333333;
	color: #e0e0e0;
}

html.light-mode .kol-push-preferences h3,
html.dark-mode .kol-push-preferences h3 {
	margin: 0 0 14px;
	font-size: 20px;
}

html.light-mode .kol-push-preferences-intro,
html.dark-mode .kol-push-preferences-intro {
	margin: -4px 0 14px;
}

html.light-mode .kol-push-preferences-intro {
	color: #4b5563;
}

html.dark-mode .kol-push-preferences-intro {
	color: #c7c7c7;
}

html.light-mode .kol-push-preferences-note,
html.dark-mode .kol-push-preferences-note {
	border-left: 4px solid #00cc99;
	margin: 0 0 14px;
	padding: 10px 12px;
}

html.light-mode .kol-push-preferences-note {
	background: #f3f4f6;
	color: #1f2937;
}

html.dark-mode .kol-push-preferences-note {
	background: #2a2a2a;
	color: #e0e0e0;
}

html.light-mode .kol-push-preferences label,
html.dark-mode .kol-push-preferences label {
	display: block;
	margin: 10px 0;
	line-height: 1.4;
}

html.light-mode .kol-push-preferences input[type="checkbox"],
html.dark-mode .kol-push-preferences input[type="checkbox"] {
	margin-right: 8px;
}

html.light-mode .kol-push-channel-list,
html.dark-mode .kol-push-channel-list {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 12px;
}

html.light-mode .kol-push-preferences .kol-push-channel-option,
html.dark-mode .kol-push-preferences .kol-push-channel-option,
html.light-mode .kol-push-preferences .kol-push-topic-option,
html.dark-mode .kol-push-preferences .kol-push-topic-option {
	align-items: flex-start;
	border-radius: 6px;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 12px;
}

html.light-mode .kol-push-preferences .kol-push-channel-option,
html.light-mode .kol-push-preferences .kol-push-topic-option {
	background: #ffffff;
	border: 1px solid #e5e7eb;
}

html.dark-mode .kol-push-preferences .kol-push-channel-option,
html.dark-mode .kol-push-preferences .kol-push-topic-option {
	background: #2a2a2a;
	border: 1px solid #333333;
}

html.light-mode .kol-push-channel-option input,
html.dark-mode .kol-push-channel-option input {
	margin-top: 4px;
}

html.light-mode .kol-push-topic-option input,
html.dark-mode .kol-push-topic-option input {
	margin-top: 3px;
}

html.light-mode .kol-push-channel-option strong,
html.light-mode .kol-push-channel-option small,
html.light-mode .kol-push-topic-option strong,
html.light-mode .kol-push-topic-option small,
html.dark-mode .kol-push-channel-option strong,
html.dark-mode .kol-push-channel-option small,
html.dark-mode .kol-push-topic-option strong,
html.dark-mode .kol-push-topic-option small {
	display: block;
}

html.light-mode .kol-push-channel-description,
html.light-mode .kol-push-topic-option small {
	color: #4b5563;
}

html.dark-mode .kol-push-channel-description,
html.dark-mode .kol-push-topic-option small {
	color: #c7c7c7;
}

html.light-mode .kol-push-channel-description,
html.dark-mode .kol-push-channel-description {
	font-size: 13px;
	margin-top: 2px;
}

html.light-mode .kol-push-channel-status,
html.dark-mode .kol-push-channel-status {
	color: #007755;
	font-size: 12px;
	margin-top: 6px;
}

html.light-mode .kol-push-channel-unavailable .kol-push-channel-status,
html.light-mode .kol-push-channel-blocked .kol-push-channel-status,
html.dark-mode .kol-push-channel-unavailable .kol-push-channel-status,
html.dark-mode .kol-push-channel-blocked .kol-push-channel-status {
	color: #b32d2e;
}

html.light-mode .kol-push-channel-ready,
html.dark-mode .kol-push-channel-ready {
	border-color: #00cc99;
}

html.light-mode .kol-push-preferences-actions,
html.dark-mode .kol-push-preferences-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

html.light-mode .kol-push-preferences-section,
html.dark-mode .kol-push-preferences-section {
	margin-top: 18px;
	padding-top: 16px;
}

html.light-mode .kol-push-preferences-section {
	border-top: 1px solid #e5e7eb;
}

html.dark-mode .kol-push-preferences-section {
	border-top: 1px solid #333333;
}

html.light-mode .kol-push-preferences-section h4,
html.dark-mode .kol-push-preferences-section h4 {
	margin: 0 0 10px;
	font-size: 16px;
}

html.light-mode .kol-push-topic-tools,
html.dark-mode .kol-push-topic-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

html.light-mode .kol-push-preference-grid,
html.dark-mode .kol-push-preference-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

html.light-mode .kol-push-topic-option small,
html.dark-mode .kol-push-topic-option small {
	font-size: 12px;
	margin-top: 2px;
}

html.light-mode .kol-push-preferences-status,
html.dark-mode .kol-push-preferences-status {
	min-height: 20px;
	margin: 12px 0 0;
}

html.light-mode .kol-push-preferences-status {
	color: #1f2937;
}

html.dark-mode .kol-push-preferences-status {
	color: #e0e0e0;
}