/* ==========================================================================
   tpl_webportaly - Dark Theme
   Activated by:
   1. [data-theme="dark"] - manual toggle via JS
   2. @media (prefers-color-scheme: dark) - automatic system detection
   ========================================================================== */

/* --------------------------------------------------------------------------
   Manual dark mode toggle
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
	--color-body-bg: #0f1117;
	--color-surface: #1a1d27;
	--color-surface-raised: #222533;

	--color-text: #e1e4ea;
	--color-text-secondary: #b0b5c1;
	--color-text-muted: #7a8196;
	--color-heading: #f0f2f5;

	--color-border: #2d3040;
	--color-border-light: #252838;

	--color-gray-50: #1e2130;
	--color-gray-100: #252838;
	--color-gray-200: #2d3040;
	--color-gray-300: #3a3e52;
	--color-gray-400: #4d5268;
	--color-gray-500: #6b7185;
	--color-gray-600: #8a90a3;
	--color-gray-700: #b0b5c1;
	--color-gray-800: #d4d7df;
	--color-gray-900: #e8eaef;

	--color-primary-light: rgba(var(--color-primary-rgb), 0.15);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

	color-scheme: dark;
}

/* Alerts in dark mode */
[data-theme="dark"] .alert-message,
[data-theme="dark"] .alert-info {
	background: #163347;
	border-color: #1c4a66;
	color: #7ec8e3;
}

[data-theme="dark"] .alert-success {
	background: #14352a;
	border-color: #1a5038;
	color: #6ecf97;
}

[data-theme="dark"] .alert-warning {
	background: #3d3314;
	border-color: #574b1d;
	color: #f0c75e;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
	background: #3c1a1e;
	border-color: #55252b;
	color: #f0868e;
}

/* Badges in dark mode */
[data-theme="dark"] .wp-badge--success {
	background: rgba(39, 174, 96, 0.15);
	color: #6ecf97;
}

[data-theme="dark"] .wp-badge--warning {
	background: rgba(243, 156, 18, 0.15);
	color: #f0c75e;
}

[data-theme="dark"] .wp-badge--danger {
	background: rgba(231, 76, 60, 0.15);
	color: #f0868e;
}

/* Footer in dark mode - slightly different shade */
[data-theme="dark"] .wp-footer {
	background: #0a0c12;
}

[data-theme="dark"] .wp-footer__bottom {
	border-top-color: #1e2130;
}

/* Topbar in dark mode */
[data-theme="dark"] .wp-topbar {
	background: #0a0c12;
}

/* Form elements */
[data-theme="dark"] .wp-input,
[data-theme="dark"] .wp-select,
[data-theme="dark"] .wp-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	background: var(--color-gray-50);
	border-color: var(--color-border);
	color: var(--color-text);
}

/* Table */
[data-theme="dark"] th {
	background: var(--color-gray-50);
}

/* Hero section - darken gradient slightly */
[data-theme="dark"] .wp-hero {
	background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.8), rgba(var(--color-primary-rgb), 0.6));
}

/* Offcanvas in dark mode */
[data-theme="dark"] .wp-offcanvas-backdrop {
	background: rgba(0, 0, 0, 0.7);
}

/* DJ Classifieds forms & buttons in dark mode */
[data-theme="dark"] #dj-classifieds select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b5c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

[data-theme="dark"] #dj-classifieds .button,
[data-theme="dark"] #dj-classifieds button.button,
[data-theme="dark"] #dj-classifieds a.button {
	background: var(--color-gray-100);
	color: var(--color-text);
	border-color: var(--color-border);
}

[data-theme="dark"] #dj-classifieds .button:hover,
[data-theme="dark"] #dj-classifieds button.button:hover,
[data-theme="dark"] #dj-classifieds a.button:hover {
	background: var(--color-gray-200);
}

[data-theme="dark"] #dj-classifieds .button.cancel {
	background: transparent;
	border-color: var(--color-border);
}

[data-theme="dark"] #dj-classifieds #itemImages .itemImage {
	background: var(--color-gray-100);
	border-color: var(--color-border);
}

[data-theme="dark"] #dj-classifieds #itemImages .itemInput.editTitle {
	background: var(--color-gray-50);
	border-color: var(--color-border);
	color: var(--color-text);
}

[data-theme="dark"] #dj-classifieds .dj-additem .desc_info_row,
[data-theme="dark"] #dj-classifieds .dj-additem .img_info_row,
[data-theme="dark"] #dj-classifieds .dj-additem .points_info_row_in {
	background: var(--color-gray-100);
}

/* --------------------------------------------------------------------------
   Automatic dark mode (system preference)
   Only applies when data-theme-auto="true" and no manual override
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) {
		--color-body-bg: #0f1117;
		--color-surface: #1a1d27;
		--color-surface-raised: #222533;

		--color-text: #e1e4ea;
		--color-text-secondary: #b0b5c1;
		--color-text-muted: #7a8196;
		--color-heading: #f0f2f5;

		--color-border: #2d3040;
		--color-border-light: #252838;

		--color-gray-50: #1e2130;
		--color-gray-100: #252838;
		--color-gray-200: #2d3040;
		--color-gray-300: #3a3e52;
		--color-gray-400: #4d5268;
		--color-gray-500: #6b7185;
		--color-gray-600: #8a90a3;
		--color-gray-700: #b0b5c1;
		--color-gray-800: #d4d7df;
		--color-gray-900: #e8eaef;

		--color-primary-light: rgba(var(--color-primary-rgb), 0.15);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

		color-scheme: dark;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-icon-sun { display: none; }
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-icon-moon { display: block; }

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer {
		background: #0a0c12;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer__bottom {
		border-top-color: #1e2130;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar {
		background: #0a0c12;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero {
		background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.8), rgba(var(--color-primary-rgb), 0.6));
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-message,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-info {
		background: #163347;
		border-color: #1c4a66;
		color: #7ec8e3;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-success {
		background: #14352a;
		border-color: #1a5038;
		color: #6ecf97;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-warning {
		background: #3d3314;
		border-color: #574b1d;
		color: #f0c75e;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-error,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-danger {
		background: #3c1a1e;
		border-color: #55252b;
		color: #f0868e;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="text"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="email"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="password"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="search"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="number"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) select,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) textarea {
		background: #1e2130;
		border-color: #2d3040;
		color: #e1e4ea;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-offcanvas-backdrop {
		background: rgba(0, 0, 0, 0.7);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) th {
		background: #1e2130;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #dj-classifieds select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b5c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #dj-classifieds .button,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #dj-classifieds button.button,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #dj-classifieds a.button {
		background: #252838;
		color: #e1e4ea;
		border-color: #2d3040;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #dj-classifieds #itemImages .itemImage {
		background: #252838;
		border-color: #2d3040;
	}

}