@tailwind base;
@tailwind components;
@tailwind utilities;

/* ───────────────────────────────────────────────
   Scoped Tailwind Preflight
   WordPress admin stillerini etkilemez, sadece
   .webixso-settings container'ı içinde geçerlidir.
   tailwind.config.js → corePlugins.preflight: false
   ─────────────────────────────────────────────── */
@layer base {
	.webixso-settings,
	.webixso-settings *,
	.webixso-settings ::before,
	.webixso-settings ::after {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: theme('borderColor.DEFAULT', currentColor);
	}
	.webixso-settings ::before,
	.webixso-settings ::after {
		--tw-content: '';
	}
	.webixso-settings {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		-moz-tab-size: 4;
		tab-size: 4;
		font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
		font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal);
		font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal);
		-webkit-tap-highlight-color: transparent;
	}
	.webixso-settings :where(hr) {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}
	.webixso-settings :where(abbr[title]) {
		text-decoration: underline dotted;
	}
	.webixso-settings :where(h1, h2, h3, h4, h5, h6) {
		font-size: inherit;
		font-weight: inherit;
	}
	.webixso-settings :where(a) {
		color: inherit;
		text-decoration: inherit;
	}
	.webixso-settings :where(b, strong) {
		font-weight: bolder;
	}
	.webixso-settings :where(code, kbd, samp, pre) {
		font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
		font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal);
		font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal);
		font-size: 1em;
	}
	.webixso-settings :where(small) {
		font-size: 80%;
	}
	.webixso-settings :where(sub, sup) {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}
	.webixso-settings :where(sub) {
		bottom: -0.25em;
	}
	.webixso-settings :where(sup) {
		top: -0.5em;
	}
	.webixso-settings :where(table) {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}
	.webixso-settings :where(button, input, optgroup, select, textarea) {
		font-family: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		font-size: 100%;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		color: inherit;
		margin: 0;
		padding: 0;
	}
	.webixso-settings :where(button, select) {
		text-transform: none;
	}
	.webixso-settings :where(button, input[type='button'], input[type='reset'], input[type='submit']) {
		-webkit-appearance: button;
		background-color: transparent;
		background-image: none;
	}
	.webixso-settings :where(:-moz-focusring) {
		outline: auto;
	}
	.webixso-settings :where(:-moz-ui-invalid) {
		box-shadow: none;
	}
	.webixso-settings :where(progress) {
		vertical-align: baseline;
	}
	.webixso-settings :where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
		height: auto;
	}
	.webixso-settings :where([type='search']) {
		-webkit-appearance: textfield;
		outline-offset: -2px;
	}
	.webixso-settings :where(::-webkit-search-decoration) {
		-webkit-appearance: none;
	}
	.webixso-settings :where(::-webkit-file-upload-button) {
		-webkit-appearance: button;
		font: inherit;
	}
	.webixso-settings :where(summary) {
		display: list-item;
	}
	.webixso-settings :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
		margin: 0;
	}
	.webixso-settings :where(fieldset) {
		margin: 0;
		padding: 0;
	}
	.webixso-settings :where(legend) {
		padding: 0;
	}
	.webixso-settings :where(ol, ul, menu) {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.webixso-settings :where(dialog) {
		padding: 0;
	}
	.webixso-settings :where(textarea) {
		resize: vertical;
	}
	.webixso-settings :where(input::placeholder, textarea::placeholder) {
		opacity: 1;
		color: theme('colors.gray.400', #9ca3af);
	}
	.webixso-settings :where(button, [role='button']) {
		cursor: pointer;
	}
	.webixso-settings :where(:disabled) {
		cursor: default;
	}
	.webixso-settings :where(img, svg, video, canvas, audio, iframe, embed, object) {
		display: block;
		vertical-align: middle;
	}
	.webixso-settings :where(img, video) {
		max-width: 100%;
		height: auto;
	}
	.webixso-settings :where([hidden]:not([hidden='until-found'])) {
		display: none;
	}
}

/* Ayar sayfası: Bildirimler yüzen kutu (sabit konum), bir süre sonra otomatik gizlenir */
body.toplevel_page_webixso .notice,
body.toplevel_page_webixso [id^="setting-error-"] {
	visibility: hidden;
	opacity: 0;
}
/* WordPress'in "Settings saved" mesajını tamamen gizle */
body.toplevel_page_webixso #setting-error-settings_updated,
body.toplevel_page_webixso .notice:contains("Settings saved") {
	display: none !important;
}
.webixso-floating-notices {
	position: fixed;
	top: 46px;
	right: 20px;
	z-index: 100000;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: opacity 0.35s ease;
}
.webixso-floating-notices .notice,
.webixso-floating-notices [id^="setting-error-"] {
	visibility: visible !important;
	opacity: 1 !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.webixso-floating-notices.webixso-floating-notices-hidden {
	display: none !important;
}

/* Modal stilleri */
.webixso-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.webixso-modal.hidden {
	display: none;
}
.webixso-modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}
.webixso-modal-content {
	position: relative;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
}
@media (prefers-color-scheme: dark) {
	.webixso-modal-content {
		background-color: rgb(15 23 42);
	}
}
.webixso-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid rgb(226 232 240);
}
@media (prefers-color-scheme: dark) {
	.webixso-modal-header {
		border-color: rgb(51 65 85);
	}
}
.webixso-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	color: rgb(100 116 139);
	cursor: pointer;
	border-radius: 0.5rem;
	transition: all 0.15s;
}
.webixso-modal-close:hover {
	background-color: rgb(241 245 249);
	color: rgb(15 23 42);
}
@media (prefers-color-scheme: dark) {
	.webixso-modal-close {
		color: rgb(148 163 184);
	}
	.webixso-modal-close:hover {
		background-color: rgb(51 65 85);
		color: rgb(241 245 249);
	}
}
.webixso-modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

/* Ayar sayfası: WordPress input/textarea stillerini sıfırla, ezilmesin */
.webixso-settings input[type="text"],
.webixso-settings input[type="password"],
.webixso-settings input[type="email"],
.webixso-settings input[type="number"],
.webixso-settings textarea {
	box-sizing: border-box !important;
	min-height: 2.5rem !important;
	height: auto !important;
	padding: 0.625rem 1rem !important;
	line-height: 1.5 !important;
}
.webixso-settings textarea {
	min-height: 5rem !important;
}
/* API Key alanı özellikle WordPress stillerinden kurtar */
.webixso-settings #webixso_api_key {
	min-height: 2.5rem !important;
	height: auto !important;
	padding: 0.625rem 1rem !important;
	width: 100% !important;
}

/* Yardım kartı: tüm yazı ve link beyaz */
.webixso-settings .webixso-help-card,
.webixso-settings .webixso-help-card h3,
.webixso-settings .webixso-help-card p,
.webixso-settings .webixso-help-card a {
	color: #fff !important;
}
.webixso-settings .webixso-help-card a:hover {
	text-decoration: underline;
	color: #fff !important;
}

.webixso-settings .webixso-card {
	@apply bg-white border border-gray-200 rounded-lg shadow-sm p-6 mb-6 max-w-2xl;
}
.webixso-settings .webixso-title {
	@apply text-lg font-semibold mb-4 mt-0;
}
.webixso-form .form-table th {
	@apply pt-4;
}
.webixso-test-result { @apply ml-2 text-sm; }
.webixso-test-result.webixso-loading { @apply text-gray-500; }
.webixso-test-result.webixso-ok { @apply text-green-600; }
.webixso-test-result.webixso-error { @apply text-red-600; }

.webixso-accounts-list {
	@apply list-none p-0 my-4 space-y-2;
}
.webixso-account-item {
	@apply flex flex-wrap items-center gap-2 py-3 border-b border-gray-100 last:border-0;
}
.webixso-account-template {
	@apply w-full mt-2 pl-10 text-sm;
}
.webixso-account-template .webixso-template-title {
	@apply font-medium text-gray-700 mb-2 mt-0;
}
.webixso-template-fields {
	@apply flex flex-wrap gap-x-4 gap-y-2;
}
.webixso-template-field {
	@apply block;
}
.webixso-template-field .webixso-template-label {
	@apply block text-gray-600 mb-0.5;
}
.webixso-template-field .description {
	@apply block text-gray-500 text-xs mt-0.5;
}
.webixso-template-checkbox {
	@apply flex items-center gap-2;
}
.webixso-placeholders code {
	@apply bg-gray-100 px-1 rounded text-xs;
}
.webixso-account-label {
	@apply flex items-center gap-2 cursor-pointer;
}
.webixso-account-avatar {
	@apply rounded-full object-cover;
}
.webixso-account-name { @apply font-medium; }
.webixso-account-type { @apply text-gray-500 text-sm; }
.webixso-default-label { @apply text-gray-500 text-sm ml-1; }

/* Sidebar meta box handle - Webixso logosu */
#webixso_share .hndle::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background-image: url('images/webixso-logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 8px;
	vertical-align: middle;
}
#webixso_share .postbox-header .hndle {
	justify-content: flex-start;
}

.webixso-sidebar-panel { @apply pb-2 text-xs; }

.webixso-sidebar-list { @apply list-none p-0 m-0 space-y-0; }
.webixso-sidebar-item {
	@apply flex items-center gap-2 py-2 px-1.5 -mx-1.5 rounded-lg border-b border-gray-100 last:border-0 transition-colors;
}
.webixso-sidebar-item-active {
	@apply bg-blue-50;
}
.webixso-sidebar-item-active .webixso-sidebar-type {
	@apply text-blue-600;
}

.webixso-sidebar-avatar-wrap {
	@apply relative flex-shrink-0;
}
.webixso-sidebar-avatar {
	@apply w-8 h-8 rounded-full object-cover block;
}
.webixso-sidebar-avatar-placeholder {
	@apply w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-semibold text-xs block;
}
.webixso-sidebar-badge {
	@apply absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded border-2 border-white;
}
.webixso-sidebar-badge-icon {
	@apply flex items-center justify-center w-5 h-5 min-w-[20px] min-h-[20px] rounded-full border-2 border-white bg-white p-0.5 box-border;
}
.webixso-sidebar-badge-icon svg {
	@apply w-full h-full block;
}

.webixso-badge-icon-pinterest { @apply text-amber-600; }
.webixso-badge-icon-instagram { @apply text-pink-500; }
.webixso-badge-icon-facebook { @apply text-blue-600; }
.webixso-badge-icon-youtube { @apply text-red-600; }
.webixso-badge-icon-twitter { @apply text-gray-900; }
.webixso-badge-icon-linkedin { @apply text-blue-700; }
.webixso-badge-icon-tiktok { @apply text-gray-900; }
.webixso-badge-icon-reddit { @apply text-orange-500; }
.webixso-badge-icon-bluesky { @apply text-sky-500; }
.webixso-badge-icon-threads { @apply text-gray-900; }
.webixso-badge-icon-telegram { @apply text-sky-500; }
.webixso-badge-icon-tumblr { @apply text-slate-700; }
.webixso-badge-icon-medium { @apply text-gray-900; }
.webixso-badge-pinterest { @apply bg-amber-400; }
.webixso-badge-youtube { @apply bg-red-600; }
.webixso-badge-instagram { @apply bg-pink-500; }
.webixso-badge-facebook { @apply bg-blue-600; }
.webixso-badge-linkedin { @apply bg-blue-700; }
.webixso-badge-twitter { @apply bg-sky-500; }
.webixso-badge-tiktok { @apply bg-gray-900; }

.webixso-sidebar-info {
	@apply flex-1 min-w-0 flex flex-col gap-0.5;
}
.webixso-sidebar-name { @apply font-semibold text-gray-900 leading-tight block truncate; }
.webixso-sidebar-type { @apply text-gray-500 text-[10px] uppercase tracking-wide; }

.webixso-sidebar-hint-box {
	@apply mt-3 p-2 rounded-lg bg-gray-100;
}
.webixso-sidebar-hint {
	@apply text-gray-500 mt-0 mb-0 italic leading-relaxed;
}
.webixso-sidebar-hint strong { @apply font-semibold not-italic text-gray-700; }
.webixso-sidebar-message { @apply mt-2; }
.webixso-sidebar-message.webixso-success { @apply text-green-600; }
.webixso-sidebar-message.webixso-error { @apply text-red-600; }

.webixso-toggle-wrap {
	@apply relative inline-block w-10 h-5 flex-shrink-0 cursor-pointer;
}
.webixso-account-toggle {
	@apply opacity-0 w-0 h-0;
}
.webixso-toggle-slider {
	@apply absolute inset-0 rounded-full bg-gray-300 transition-colors;
}
.webixso-toggle-slider::before {
	content: '';
	@apply absolute h-4 w-4 left-0.5 bottom-0.5 rounded-full bg-white shadow transition-transform;
}
.webixso-account-toggle:checked + .webixso-toggle-slider {
	@apply bg-blue-600;
}
.webixso-account-toggle:checked + .webixso-toggle-slider::before {
	transform: translateX(1.25rem);
}

.webixso-reshare-btn {
	@apply flex items-center gap-1 flex-shrink-0 text-blue-600 hover:text-blue-700 font-medium cursor-pointer border-0 bg-transparent p-0;
}
.webixso-reshare-btn:disabled {
	@apply opacity-70 cursor-not-allowed text-gray-500;
}
.webixso-reshare-icon {
	@apply w-4 h-4 flex-shrink-0 inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
}
.webixso-reshare-btn .webixso-reshare-icon {
	/* Inherit button color so icon matches text */
	filter: none;
}