/**
 * Yolyc Company Reports - Public styles
 *
 * Colors are expressed with CSS custom properties so the modal
 * automatically inherits Yolyc's light/dark theme. Update the values
 * inside :root / [data-theme="dark"] to match the active theme system,
 * or simply let them fall through if the theme already defines the
 * --yolyc-* variables globally.
 */

:root {
	--yolyc-cr-bg: #ffffff;
	--yolyc-cr-surface: #f7f7f8;
	--yolyc-cr-text: #1d1d1f;
	--yolyc-cr-text-muted: #6e6e73;
	--yolyc-cr-border: #d8d8dc;
	--yolyc-cr-primary: #c0392b;
	--yolyc-cr-primary-hover: #a53125;
	--yolyc-cr-focus: #2f6fed;
	--yolyc-cr-overlay: rgba(0, 0, 0, 0.5);
	--yolyc-cr-error: #c0392b;
	--yolyc-cr-success: #1e7e34;
}

[data-theme="dark"],
.dark-mode,
body.dark {
	--yolyc-cr-bg: #1e1f22;
	--yolyc-cr-surface: #2a2b2f;
	--yolyc-cr-text: #f2f2f3;
	--yolyc-cr-text-muted: #a5a5aa;
	--yolyc-cr-border: #3a3b3f;
	--yolyc-cr-primary: #e0574b;
	--yolyc-cr-primary-hover: #ec695d;
	--yolyc-cr-focus: #6ca0ff;
	--yolyc-cr-overlay: rgba(0, 0, 0, 0.7);
	--yolyc-cr-error: #e0574b;
	--yolyc-cr-success: #4caf50;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--yolyc-cr-bg: #1e1f22;
		--yolyc-cr-surface: #2a2b2f;
		--yolyc-cr-text: #f2f2f3;
		--yolyc-cr-text-muted: #a5a5aa;
		--yolyc-cr-border: #3a3b3f;
		--yolyc-cr-primary: #e0574b;
		--yolyc-cr-primary-hover: #ec695d;
		--yolyc-cr-focus: #6ca0ff;
		--yolyc-cr-overlay: rgba(0, 0, 0, 0.7);
		--yolyc-cr-error: #e0574b;
		--yolyc-cr-success: #4caf50;
	}
}

.yolyc-cr-wrapper {
	margin: 2em 0 1em;
	font-size: 0.9rem;
}

.yolyc-cr-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: none;
	color: var(--yolyc-cr-text-muted);
	cursor: pointer;
	font-size: inherit;
	padding: 0.25em 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yolyc-cr-trigger:hover,
.yolyc-cr-trigger:focus-visible {
	color: var(--yolyc-cr-primary);
}

.yolyc-cr-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yolyc-cr-modal[hidden] {
	display: none;
}

.yolyc-cr-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--yolyc-cr-overlay);
}

.yolyc-cr-modal__panel {
	position: relative;
	background: var(--yolyc-cr-bg);
	color: var(--yolyc-cr-text);
	border-radius: 12px;
	max-width: 480px;
	width: calc(100% - 2rem);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	padding: 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.yolyc-cr-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--yolyc-cr-text-muted);
	cursor: pointer;
	padding: 0.25rem;
}

.yolyc-cr-modal__close:hover {
	color: var(--yolyc-cr-text);
}

.yolyc-cr-modal__title {
	margin: 0 1.5rem 1rem 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--yolyc-cr-text);
}

.yolyc-cr-field {
	margin-bottom: 1rem;
}

.yolyc-cr-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--yolyc-cr-text);
}

.yolyc-cr-required {
	color: var(--yolyc-cr-error);
}

.yolyc-cr-field select,
.yolyc-cr-field textarea,
.yolyc-cr-field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	background: var(--yolyc-cr-surface);
	color: var(--yolyc-cr-text);
	border: 1px solid var(--yolyc-cr-border);
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
	font-size: 0.9rem;
	font-family: inherit;
}

.yolyc-cr-field select:focus,
.yolyc-cr-field textarea:focus,
.yolyc-cr-field input[type="email"]:focus {
	outline: 2px solid var(--yolyc-cr-focus);
	outline-offset: 1px;
}

.yolyc-cr-char-count {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--yolyc-cr-text-muted);
	text-align: right;
}

.yolyc-cr-help {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	color: var(--yolyc-cr-text-muted);
}

.yolyc-cr-form-message {
	background: var(--yolyc-cr-surface);
	border: 1px solid var(--yolyc-cr-border);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	font-size: 0.85rem;
	margin: 0 0 1rem;
}

.yolyc-cr-form-message[data-state="error"] {
	color: var(--yolyc-cr-error);
	border-color: var(--yolyc-cr-error);
}

.yolyc-cr-form-message[hidden] {
	display: none;
}

.yolyc-cr-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.yolyc-cr-btn {
	border-radius: 8px;
	padding: 0.55rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid transparent;
}

.yolyc-cr-btn--secondary {
	background: transparent;
	border-color: var(--yolyc-cr-border);
	color: var(--yolyc-cr-text);
}

.yolyc-cr-btn--secondary:hover {
	background: var(--yolyc-cr-surface);
}

.yolyc-cr-btn--primary {
	background: var(--yolyc-cr-primary);
	color: #fff;
}

.yolyc-cr-btn--primary:hover {
	background: var(--yolyc-cr-primary-hover);
}

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

.yolyc-cr-success {
	text-align: center;
	padding: 1rem 0;
	color: var(--yolyc-cr-success);
	font-weight: 500;
}

.yolyc-cr-success[hidden] {
	display: none;
}