/* ===== DARK MODE THEME ===== */
/* html[data-theme="dark"] prefix ensures higher specificity than Tailwind utility classes */

/* ----- Base ----- */
html[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ----- Navigation ----- */
html[data-theme="dark"] nav {
    background-color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

html[data-theme="dark"] nav .text-slate-800 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] nav ul a,
html[data-theme="dark"] nav .text-slate-600 {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #theme-toggle {
    color: #94a3b8 !important;
}

/* ----- Sections (bg-white) ----- */
html[data-theme="dark"] #about,
html[data-theme="dark"] #products,
html[data-theme="dark"] #contact {
    background-color: #1e293b !important;
}

/* ----- Drawings section (bg-slate-100) ----- */
html[data-theme="dark"] #drawings {
    background-color: #0f172a !important;
}

/* ----- Text colors ----- */
html[data-theme="dark"] .text-slate-900 {
    color: #f1f5f9 !important;
}

/* Exception: white-bg buttons with dark text (e.g. hero CTA) must stay dark */
html[data-theme="dark"] .bg-white.text-slate-900 {
    color: #0f172a !important;
}

html[data-theme="dark"] .text-slate-800 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .text-slate-600 {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .text-slate-500 {
    color: #64748b !important;
}

html[data-theme="dark"] .text-slate-400 {
    color: #64748b !important;
}

/* ----- Product Cards ----- */
html[data-theme="dark"] .group.border {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .group .bg-slate-100 {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .group h3 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .group ul li {
    color: #94a3b8 !important;
}

html[data-theme="dark"] button[data-product] {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] button[data-product]:hover {
    background-color: #334155 !important;
}

/* ----- Drawings Table ----- */
html[data-theme="dark"] #drawings .bg-white {
    background-color: #1e293b !important;
}

html[data-theme="dark"] table tbody tr:hover {
    background-color: #1e3a5f !important;
}

html[data-theme="dark"] table tbody td {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] table tbody tr {
    border-color: #334155 !important;
}

/* ----- Contact Section ----- */
html[data-theme="dark"] #contact p.text-lg.font-bold {
    color: #f1f5f9 !important;
}

/* ----- Form ----- */
html[data-theme="dark"] form.bg-slate-50 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] form label {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] form input,
html[data-theme="dark"] form textarea {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] form input::placeholder,
html[data-theme="dark"] form textarea::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] form button.bg-slate-900 {
    background-color: #334155 !important;
}

html[data-theme="dark"] form button.bg-slate-900:hover {
    background-color: #475569 !important;
}

/* ----- Modal ----- */
html[data-theme="dark"] #spec-modal > div {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] #modal-title {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #modal-content,
html[data-theme="dark"] #modal-content p,
html[data-theme="dark"] #modal-content li {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #modal-content h4 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #modal-close-button {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #modal-close-button:hover {
    color: #f1f5f9 !important;
}

/* ----- Location Section ----- */
html[data-theme="dark"] #location {
    background-color: #0f172a !important;
}

html[data-theme="dark"] #location .bg-white {
    background-color: #1e293b !important;
}

html[data-theme="dark"] #location .text-slate-800 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #location .text-slate-500 {
    color: #64748b !important;
}

/* ----- Hero gradient ----- */
.gradient-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4));
}

/* ----- Smooth transitions ----- */
body,
nav,
section,
.group.border,
form,
input,
textarea,
table,
#spec-modal > div {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}