/* =====================================================
   UMBER FURNITURE SHOWROOM — DARK MODE THEME
   assets/css/dark-mode.css
===================================================== */

:root {
  --home-bg: #ffffff;
  --text-color: #111111;
}

[data-theme="dark"] {
  --home-bg: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--home-bg) !important;
  color: var(--text-color);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Base dark mode surfaces */
[data-theme="dark"] section,
[data-theme="dark"] .card,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-\[\#FDFBF9\],
[data-theme="dark"] .bg-\[\#EFEBE9\],
[data-theme="dark"] .bg-\[\#F9F7F5\],
[data-theme="dark"] .bg-\[\#F7F3EE\],
[data-theme="dark"] .bg-\[\#F5F1EF\],
[data-theme="dark"] .bg-\[\#E8DED9\],
[data-theme="dark"] .border-brand-100 {
  background-color: #000000 !important;
  border-color: #333333 !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] .btn1:hover {
  color: #000000 !important;
}

/* Base typography */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] a,
[data-theme="dark"] button,
[data-theme="dark"] i,
[data-theme="dark"] label,
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] div,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] blockquote {
  color: #ffffff !important;
}

/* Header & Navigation */
[data-theme="dark"] #mainNavbar,
[data-theme="dark"] #mobileMenu {
  background-color: #1e1e1e !important;
}

[data-theme="dark"] header a,
[data-theme="dark"] header button,
[data-theme="dark"] header i,
[data-theme="dark"] header span,
[data-theme="dark"] header h1 {
  color: #ffffff !important;
}

[data-theme="dark"] #mainNavbar button,
[data-theme="dark"] #homeDropdownBtn,
[data-theme="dark"] #theme-toggle,
[data-theme="dark"] #rtlToggle,
[data-theme="dark"] #hamburgerBtn,
[data-theme="dark"] #closeMenuBtn,
[data-theme="dark"] #mobileDropdownBtn {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] #mobileThemeToggle,
[data-theme="dark"] #mobileRtlToggle {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
  border: 1px solid #3e3e3e !important;
}

[data-theme="dark"] #mobileThemeToggle:hover,
[data-theme="dark"] #mobileRtlToggle:hover {
  background-color: #383838 !important;
}

[data-theme="dark"] #homeDropdownMenu,
[data-theme="dark"] #dashboardDropdownMenu,
[data-theme="dark"] #profileMenu {
  background-color: #161616 !important;
  border-color: #333333 !important;
}

[data-theme="dark"] #homeDropdownMenu a:hover,
[data-theme="dark"] #dashboardDropdownMenu a:hover,
[data-theme="dark"] #profileMenu a:hover {
  background-color: #242424 !important;
  color: #ffffff !important;
}

[data-theme="dark"] #hamburgerBtn,
[data-theme="dark"] #hamburgerBtn i {
  color: #C4A482 !important;
}

[data-theme="dark"] #hamburgerBtn:hover,
[data-theme="dark"] #hamburgerBtn:hover i {
  color: #E8DED9 !important;
}

/* Footer */
[data-theme="dark"] footer {
  background-color: #181818 !important;
  border-color: #333333 !important;
}

[data-theme="dark"] footer a,
[data-theme="dark"] footer p,
[data-theme="dark"] footer h1,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer i,
[data-theme="dark"] footer span,
[data-theme="dark"] footer li {
  color: #ffffff !important;
}

/* Hero Banners */
#materialsHero,
#galleryHero {
  background-color: #2A1B18;
}

[data-theme="dark"] #materialsHero,
[data-theme="dark"] #galleryHero {
  background-color: #1F1411 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Section Separation & Contrast */
[data-theme="dark"] section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #index,
[data-theme="dark"] #projects,
[data-theme="dark"] #comparison {
  background-color: #0d0d0d !important;
}

[data-theme="dark"] #sampler,
[data-theme="dark"] section.bg-brand-800 {
  background-color: #1a1210 !important;
}

[data-theme="dark"] #care,
[data-theme="dark"] section.bg-brand-600 {
  background-color: #1c1412 !important;
}

[data-theme="dark"] #samples,
[data-theme="dark"] section.bg-brand-900 {
  background-color: #140d0c !important;
}

/* Outlined Display Text in Dark Mode */
[data-theme="dark"] .text-outline {
  -webkit-text-stroke: 1px #e0d6d0;
}

/* Badges & Preview Tags */
[data-theme="dark"] #matFamilyTag,
[data-theme="dark"] .bg-white\/90 {
  background-color: rgba(20, 20, 20, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .bg-white\/95 {
  background-color: rgba(20, 20, 20, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .bg-white\/95 i,
[data-theme="dark"] .bg-white\/95 span {
  color: #ffffff !important;
}

/* Material Explorer (materials.html) */
[data-theme="dark"] .mat-item {
  background-color: #151515 !important;
  border-color: #2c2c2c !important;
}

[data-theme="dark"] .mat-item:hover {
  background-color: #202020 !important;
  border-color: #555555 !important;
}

[data-theme="dark"] .mat-item.active {
  background-color: #5D4037 !important;
  border-color: #8D6E63 !important;
  box-shadow: 0 6px 18px rgba(93, 64, 55, 0.4) !important;
}

[data-theme="dark"] .mat-item.active span {
  color: #ffffff !important;
}

[data-theme="dark"] .mat-item.active span.text-stone-400 {
  color: #D7CCC8 !important;
}

[data-theme="dark"] .bg-brand-100 {
  background-color: #2b2b2b !important;
}

[data-theme="dark"] .rating-fill {
  background-color: #D4C4BD !important;
}

/* Gallery Filter Pills (gallery.html) */
[data-theme="dark"] .proj-filter {
  background-color: #141414 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .proj-filter:hover {
  background-color: #222222 !important;
  border-color: #666666 !important;
}

[data-theme="dark"] .proj-filter.bg-brand-700 {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #111111 !important;
}

/* Comparison Tables */
[data-theme="dark"] thead tr.bg-brand-800 {
  background-color: #261815 !important;
}

[data-theme="dark"] tbody tr.bg-\[\#F9F7F5\] {
  background-color: #141414 !important;
}

[data-theme="dark"] tbody tr:not(.bg-\[\#F9F7F5\]):not(.bg-brand-50) {
  background-color: #0d0d0d !important;
}

[data-theme="dark"] tbody tr.bg-brand-50,
[data-theme="dark"] tr.bg-brand-50,
[data-theme="dark"] .bg-brand-50 {
  background-color: #1e1614 !important;
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Care Guide */
[data-theme="dark"] .care-tab.bg-white {
  background-color: #ffffff !important;
  color: #111111 !important;
}

[data-theme="dark"] .care-tab:not(.bg-white) {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .care-panel .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .care-panel .bg-brand-900\/30 {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Form Buttons & Selects */
[data-theme="dark"] button[type="submit"] {
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ffffff !important;
}

[data-theme="dark"] button[type="submit"]:hover {
  background-color: #D4C4BD !important;
  color: #111111 !important;
}

[data-theme="dark"] button[type="submit"] span,
[data-theme="dark"] button[type="submit"]:hover span {
  color: #111111 !important;
}

[data-theme="dark"] select option {
  background-color: #1f1411 !important;
  color: #ffffff !important;
}

/* Primary White CTA Buttons (Book A Service, Book Consultation, etc.) */
[data-theme="dark"] a.bg-white:not(.contact-card),
[data-theme="dark"] button.bg-white {
  background-color: #ffffff !important;
  color: #2A1B18 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] a.bg-white:not(.contact-card):hover,
[data-theme="dark"] button.bg-white:hover {
  background-color: #E8DED9 !important;
  color: #2A1B18 !important;
  border-color: #E8DED9 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] a.bg-white:not(.contact-card) span,
[data-theme="dark"] button.bg-white span,
[data-theme="dark"] a.bg-white:not(.contact-card):hover span,
[data-theme="dark"] button.bg-white:hover span {
  color: #2A1B18 !important;
}


/* =====================================================
   AUTH PAGES DARK MODE — login.html & sign.html
===================================================== */

[data-theme="dark"] {
  --auth-input-bg: #1a1a1a;
  --auth-input-border: #3e3e3e;
  --auth-input-text: #ffffff;
}

[data-theme="dark"] #signNavbar,
[data-theme="dark"] #loginNavbar {
  background-color: #0a0a0a !important;
  border-bottom-color: #1a1a1a !important;
}

[data-theme="dark"] .form-card {
  background-color: #111111 !important;
  border-color: #2a2a2a !important;
}

[data-theme="dark"] .form-input {
  background-color: #1a1a1a !important;
  border-color: #3e3e3e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .form-input:focus {
  border-color: #8D6E63 !important;
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2) !important;
}

[data-theme="dark"] .form-input::placeholder {
  color: #5D4037 !important;
}

[data-theme="dark"] .password-toggle {
  color: #8D6E63 !important;
}

[data-theme="dark"] .password-toggle:hover {
  color: #D7CCC8 !important;
}

[data-theme="dark"] .btn-signup,
[data-theme="dark"] .btn-login {
  background-color: #8D6E63 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-signup:hover,
[data-theme="dark"] .btn-login:hover {
  background-color: #A1887F !important;
}

[data-theme="dark"] .btn-social {
  border-color: #3e3e3e !important;
  color: #ffffff !important;
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .btn-social:hover {
  background-color: #242424 !important;
  border-color: #5D4037 !important;
}

[data-theme="dark"] .divider::before,
[data-theme="dark"] .divider::after {
  background-color: #2a2a2a !important;
}

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

[data-theme="dark"] .link-brown {
  color: #D7CCC8 !important;
}

[data-theme="dark"] .link-brown:hover {
  color: #EFEBE9 !important;
}

[data-theme="dark"] .auth-page-bg {
  background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #1a1a1a 100%) !important;
}

[data-theme="dark"] .blob,
[data-theme="dark"] .blob-login-1,
[data-theme="dark"] .blob-login-2 {
  opacity: 0.08 !important;
}