* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
	color: #0f172a;
	background: #f8fafc;
}

/* Fix: Remove seta nativa de TODOS os selects do site */
select,
select.appearance-none,
select:not([size]):not([multiple]) {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	background-size: 0 0 !important;
	background-repeat: no-repeat !important;
}

.container {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

.site-header {
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
}

.header-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.logo {
	font-weight: 700;
	color: #111827;
	text-decoration: none;
	font-size: 20px;
}

.nav a {
	margin-left: 16px;
	text-decoration: none;
	color: #334155;
}

.nav a.btn {
	background: #0ea5e9;
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
}

.hero {
	padding: 60px 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.hero h1 {
	font-size: 36px;
	margin: 0 0 12px;
}

.hero p {
	font-size: 18px;
	color: #475569;
}

.hero .cta {
	margin-top: 16px;
}

.btn-primary {
	background: #0ea5e9;
	color: #fff;
	padding: 12px 18px;
	border-radius: 8px;
	display: inline-block;
	text-decoration: none;
}

.features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 40px 0;
}

.card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
}

.card h3 {
	margin-top: 0;
}

.auth {
	max-width: 420px;
	margin: 40px auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 20px;
}

.auth h2 {
	margin-top: 0;
}

.field {
	margin-bottom: 12px;
}

.field label {
	display: block;
	margin-bottom: 6px;
	color: #334155;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
}

.actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.error {
	color: #b91c1c;
	margin-bottom: 10px;
}

.success {
	color: #065f46;
	margin-bottom: 10px;
}

.dashboard {
	padding: 20px 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 10px;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
}

.gallery img {
	display: block;
}

.dropzone {
	border: 2px dashed #94a3b8;
	padding: 16px;
	border-radius: 10px;
	text-align: center;
	background: #f8fafc;
	color: #475569;
}

.dropzone.dragover {
	background: #e0f2fe;
	border-color: #0ea5e9;
}

[data-bs-theme="dark"] .dropzone {
	background: #0f172a;
	color: #cbd5e1;
	border-color: #334155;
}

[data-bs-theme="dark"] .dropzone.dragover {
	background: #0b3b53;
	border-color: #38bdf8;
}

/* Skeleton loading */
.skeleton {
	position: relative;
	overflow: hidden;
	background: #e2e8f0;
}

[data-bs-theme="dark"] .skeleton {
	background: #334155;
}

.skeleton:after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* Global form fields - smooth borders and consistent focus */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control,
.form-select {
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 44px;
	background: #ffffff;
	color: #0f172a;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
	border-color: #0ea5e9;
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Dark mode adjustments */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="time"],
.dark textarea,
.dark select,
.dark .form-control,
.dark .form-select {
	background: #0f172a;
	color: #e2e8f0;
	border-color: #334155;
}

.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="date"]:focus,
.dark input[type="time"]:focus,
.dark textarea:focus,
.dark select:focus,
.dark .form-control:focus,
.dark .form-select:focus {
	border-color: #38bdf8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Update dropzone dark mode to Tailwind dark class */
.dark .dropzone {
	background: #0f172a;
	color: #cbd5e1;
	border-color: #334155;
}

.dark .dropzone.dragover {
	background: #0b3b53;
	border-color: #38bdf8;
}

/* Progress bar visual */
.upload-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(14, 165, 233, 0.2);
	z-index: 9999;
	display: none;
}

.upload-progress.active {
	display: block;
}

.upload-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #0ea5e9, #38bdf8);
	width: 0;
	transition: width 0.2s ease;
	box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Error messages inline */
.upload-error {
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #b91c1c;
	font-size: 13px;
}

.dark .upload-error {
	background: #450a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
}

.upload-error.show {
	display: block;
}

/* Success message inline */
.upload-success {
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	color: #065f46;
	font-size: 13px;
}

.dark .upload-success {
	background: #064e3b;
	border-color: #065f46;
	color: #6ee7b7;
}

.upload-success.show {
	display: block;
}

/* Autosave indicator enhancement */
.autosave-indicator {
	position: fixed;
	top: 80px;
	right: 20px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	font-size: 13px;
	color: #475569;
	z-index: 1000;
	display: none;
}

.dark .autosave-indicator {
	background: #1e293b;
	border-color: #334155;
	color: #cbd5e1;
}

.autosave-indicator.saving {
	border-color: #0ea5e9;
	color: #0ea5e9;
}

.autosave-indicator.saved {
	border-color: #10b981;
	color: #10b981;
}

@media (min-width: 800px) {
	.hero {
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}

	.features {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =====================================================
   GLOBAL DARK MODE OVERRIDES
   Cobre automaticamente todas as paginas admin e publicas
   ===================================================== */

/* --- Base elements --- */
html.dark body {
	color: #e2e8f0;
	background: #0f172a;
}

html.dark .site-header {
	background: #1e293b;
	border-bottom-color: #334155;
}

html.dark .logo {
	color: #f1f5f9;
}

html.dark .nav a {
	color: #cbd5e1;
}

html.dark .card {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}

html.dark .auth {
	background: #1e293b;
	border-color: #334155;
}

html.dark .field label {
	color: #cbd5e1;
}

html.dark .field input,
html.dark .field select,
html.dark .field textarea {
	border-color: #475569;
	background: #0f172a;
	color: #e2e8f0;
}

html.dark .error {
	color: #fca5a5;
}

html.dark .success {
	color: #6ee7b7;
}

html.dark .table th,
html.dark .table td {
	border-bottom-color: #334155;
	color: #e2e8f0;
}

html.dark .table th {
	color: #94a3b8;
}

html.dark .hero p {
	color: #94a3b8;
}

html.dark .dashboard {
	color: #e2e8f0;
}

/* --- Fix: Skeleton com classe .dark ao inves de data-bs-theme --- */
html.dark .skeleton {
	background: #334155;
}

/* --- Tailwind utility dark overrides ---
   Aplica fundo/texto/borda escuro para utilitarios Tailwind
   quando a pagina nao define dark: variants proprios.
   Especificidade baixa (html.dark .class) garante que
   dark: variants explicitos (ex: dark:bg-slate-800) prevalecem. */

/* Backgrounds */
html.dark .bg-white {
	background-color: #1e293b;
}

html.dark .bg-gray-50,
html.dark .bg-slate-50 {
	background-color: #0f172a;
}

html.dark .bg-gray-100,
html.dark .bg-slate-100 {
	background-color: #1e293b;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
	background-color: #334155;
}

html.dark .bg-blue-50 {
	background-color: rgba(30, 58, 138, 0.3);
}

html.dark .bg-green-50 {
	background-color: rgba(6, 78, 59, 0.3);
}

html.dark .bg-red-50,
html.dark .bg-rose-50 {
	background-color: rgba(127, 29, 29, 0.3);
}

html.dark .bg-yellow-50,
html.dark .bg-amber-50 {
	background-color: rgba(120, 53, 15, 0.3);
}

html.dark .bg-indigo-50 {
	background-color: rgba(49, 46, 129, 0.3);
}

html.dark .bg-purple-50 {
	background-color: rgba(76, 29, 149, 0.3);
}

/* Text colors */
html.dark .text-gray-900,
html.dark .text-slate-900 {
	color: #f1f5f9;
}

html.dark .text-gray-800,
html.dark .text-slate-800 {
	color: #e2e8f0;
}

html.dark .text-gray-700,
html.dark .text-slate-700 {
	color: #cbd5e1;
}

html.dark .text-gray-600,
html.dark .text-slate-600 {
	color: #94a3b8;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
	color: #64748b;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
	color: #64748b;
}

/* Borders */
html.dark .border-gray-100,
html.dark .border-slate-100 {
	border-color: #1e293b;
}

html.dark .border-gray-200,
html.dark .border-slate-200 {
	border-color: #334155;
}

html.dark .border-gray-300,
html.dark .border-slate-300 {
	border-color: #475569;
}

/* Divide */
html.dark .divide-gray-200> :not([hidden])~ :not([hidden]),
html.dark .divide-slate-200> :not([hidden])~ :not([hidden]) {
	border-color: #334155;
}

/* Hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-slate-50:hover {
	background-color: #1e293b;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-100:hover {
	background-color: #334155;
}

html.dark .hover\:bg-gray-200:hover {
	background-color: #475569;
}

/* Ring/shadow */
html.dark .ring-gray-200,
html.dark .ring-slate-200 {
	--tw-ring-color: #334155;
}

html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
	--tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* Placeholder */
html.dark .placeholder-gray-400::placeholder,
html.dark .placeholder-gray-500::placeholder,
html.dark .placeholder-slate-400::placeholder {
	color: #64748b;
}

html.dark ::placeholder {
	color: #64748b;
}

/* --- Tables comuns (admin) --- */
html.dark thead {
	background-color: #1e293b;
}

html.dark thead th {
	color: #94a3b8;
}

html.dark tbody tr {
	border-color: #334155;
}

html.dark tbody tr:hover {
	background-color: rgba(51, 65, 85, 0.5);
}

/* --- Modals e Dialogs --- */
html.dark [role="dialog"],
html.dark .modal-content {
	background-color: #1e293b;
	color: #e2e8f0;
	border-color: #334155;
}

/* --- Tom Select dark mode (publico) --- */
html.dark .ts-wrapper .ts-control {
	background-color: #1e293b;
	border-color: #475569;
	color: #e2e8f0;
}

html.dark .ts-wrapper .ts-dropdown {
	background-color: #1e293b;
	border-color: #475569;
	color: #e2e8f0;
}

html.dark .ts-wrapper .ts-dropdown .option:hover,
html.dark .ts-wrapper .ts-dropdown .active {
	background-color: #334155;
	color: #f1f5f9;
}

/* --- Select/checkbox/radio --- */
html.dark select option {
	background-color: #1e293b;
	color: #e2e8f0;
}

/* --- Scrollbar --- */
html.dark ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

html.dark ::-webkit-scrollbar-track {
	background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
	background: #475569;
	border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
	background: #64748b;
}

/* --- Focus ring --- */
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
	border-color: #38bdf8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* --- Alerts/Badges (admin) --- */
html.dark .bg-green-100 {
	background-color: rgba(6, 78, 59, 0.3);
}

html.dark .bg-red-100 {
	background-color: rgba(127, 29, 29, 0.3);
}

html.dark .bg-yellow-100 {
	background-color: rgba(120, 53, 15, 0.3);
}

html.dark .bg-blue-100 {
	background-color: rgba(30, 58, 138, 0.3);
}

html.dark .bg-indigo-100 {
	background-color: rgba(49, 46, 129, 0.3);
}

html.dark .bg-purple-100 {
	background-color: rgba(76, 29, 149, 0.3);
}

html.dark .bg-pink-100 {
	background-color: rgba(131, 24, 67, 0.3);
}

html.dark .bg-orange-100 {
	background-color: rgba(124, 45, 18, 0.3);
}

html.dark .text-green-800 {
	color: #6ee7b7;
}

html.dark .text-red-800 {
	color: #fca5a5;
}

html.dark .text-yellow-800 {
	color: #fcd34d;
}

html.dark .text-blue-800 {
	color: #93c5fd;
}

html.dark .text-indigo-800 {
	color: #a5b4fc;
}

html.dark .text-purple-800 {
	color: #c4b5fd;
}

html.dark .text-pink-800 {
	color: #f9a8d4;
}

html.dark .text-orange-800 {
	color: #fdba74;
}

html.dark .text-green-700 {
	color: #4ade80;
}

html.dark .text-red-700 {
	color: #f87171;
}

html.dark .text-yellow-700 {
	color: #fbbf24;
}

/* --- Inline color safety ---
   Elementos com style="color:#000..." ou background branco inline
   recebem filtro para adaptar ao escuro. */
html.dark [style*="color:#000000"],
html.dark [style*="color: #000000"],
html.dark [style*="color:#000"] {
	color: #f1f5f9 !important;
}

html.dark [style*="color:#111827"],
html.dark [style*="color: #111827"] {
	color: #f1f5f9 !important;
}

html.dark [style*="color:#0f172a"],
html.dark [style*="color: #0f172a"] {
	color: #e2e8f0 !important;
}

/* --- Fix dropzone com ambos seletores --- */
html.dark .dropzone,
[data-bs-theme="dark"] .dropzone {
	background: #0f172a;
	color: #cbd5e1;
	border-color: #334155;
}

html.dark .dropzone.dragover,
[data-bs-theme="dark"] .dropzone.dragover {
	background: #0b3b53;
	border-color: #38bdf8;
}

/* --- Transitions suaves ao trocar modo --- */
body,
.card,
.auth,
.site-header,
input,
select,
textarea,
.table th,
.table td,
.dropzone {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}