/* Dark mode — CSS media query (OS preference) + body.dark-mode class (manual override) */

/* ── shared rules via mixin-like block ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    background-color: #121212;
    color: #e0e0e0;
  }
  body:not(.light-mode) .app-header,
  body:not(.light-mode) .logo-container {
    background: #1e1e1e !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
  }
  body:not(.light-mode) .menu {
    background: #2a2a2a !important;
    color: #e0e0e0;
  }
  body:not(.light-mode) .menu ul li a,
  body:not(.light-mode) .menu ul li { color: #e0e0e0; }
  body:not(.light-mode) a { color: #4fc3f7; }
  body:not(.light-mode) footer { background-color: #1e1e1e; color: #e0e0e0; }
  body:not(.light-mode) input[type="text"],
  body:not(.light-mode) input[type="search"] {
    background-color: #2a2a2a; color: #e0e0e0; border-color: #444;
  }
  body:not(.light-mode) .border-desc-ingred { background-color: #282828 !important; color: #e0e0e0 !important; }
  body:not(.light-mode) .border-desc-ingred p,
  body:not(.light-mode) .border-desc-ingred li,
  body:not(.light-mode) .border-desc-ingred h2,
  body:not(.light-mode) .border-desc-ingred pre { color: #e0e0e0 !important; }
  body:not(.light-mode) .w3-white { color: #e0e0e0 !important; background-color: #1e1e1e !important; }
  body:not(.light-mode) .w3-pale-red { color: #e0e0e0 !important; background-color: #3a2f5e !important; }
  body:not(.light-mode) .w3-gray { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
  body:not(.light-mode) .w3-text-dark-grey { color: #ccc; }
  body:not(.light-mode) .recipe-item h3 { color: #e0e0e0; }
  body:not(.light-mode) .slogan-left { color: #e0e0e0 !important; }
  body:not(.light-mode) .bookmark-btn { border-color: rgba(255,255,255,0.35) !important; background: rgba(255,255,255,0.1) !important; color: #ccc !important; }
  body:not(.light-mode) .bookmark-btn .bookmark-icon { opacity: 0.6; }
  body:not(.light-mode) .bookmark-btn.bookmarked { border-color: var(--kuzina-accent) !important; background: rgba(0,150,136,0.18) !important; color: var(--kuzina-accent) !important; }
  body:not(.light-mode) .bookmark-btn.bookmarked .bookmark-icon { opacity: 1; }
  body:not(.light-mode) .bookmarks-header h1 { color: #e0e0e0; }
  body:not(.light-mode) .category-admin-item { background: #1e1e1e !important; border-color: #333 !important; }
  body:not(.light-mode) .category-admin-item h3,
  body:not(.light-mode) .category-admin-item p { color: #e0e0e0 !important; }
  body:not(.light-mode) .slogan-left,
  body:not(.light-mode) .slogan-right { color: #e0e0e0 !important; }
  body:not(.light-mode) .bottom-navbar { background: #1e1e1e !important; border-top-color: #333 !important; }
  body:not(.light-mode) .bottom-nav-item { color: #aaa !important; }
  body:not(.light-mode) .bottom-sheet-panel { background: #1e1e1e; }
  body:not(.light-mode) .bottom-sheet-header { border-bottom-color: #333; }
  body:not(.light-mode) .bottom-sheet-body input,
  body:not(.light-mode) .bottom-sheet-body textarea,
  body:not(.light-mode) .bottom-sheet-body select {
    background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #555 !important;
  }
  body:not(.light-mode) .bottom-sheet-body label { color: #ccc; }
}

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}
body.dark-mode .app-header,
body.dark-mode .logo-container {
  background: #1e1e1e !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}
body.dark-mode .menu { background: #2a2a2a !important; color: #e0e0e0; }
body.dark-mode .menu ul li a,
body.dark-mode .menu ul li { color: #e0e0e0; }
body.dark-mode a { color: #4fc3f7; }
body.dark-mode footer { background-color: #1e1e1e; color: #e0e0e0; }
body.dark-mode input[type="text"],
body.dark-mode input[type="search"] {
  background-color: #2a2a2a; color: #e0e0e0; border-color: #444;
}
body.dark-mode .border-desc-ingred { background-color: #282828 !important; color: #e0e0e0 !important; }
body.dark-mode .border-desc-ingred p,
body.dark-mode .border-desc-ingred li,
body.dark-mode .border-desc-ingred h2,
body.dark-mode .border-desc-ingred pre { color: #e0e0e0 !important; }
body.dark-mode .w3-white { color: #e0e0e0 !important; background-color: #1e1e1e !important; }
body.dark-mode .w3-pale-red { color: #e0e0e0 !important; background-color: #3a2f5e !important; }
body.dark-mode .w3-gray { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
body.dark-mode .w3-text-dark-grey { color: #ccc; }
body.dark-mode .recipe-item h3 { color: #e0e0e0; }
body.dark-mode .slogan-left { color: #e0e0e0 !important; }
body.dark-mode .bottom-navbar { background: #1e1e1e !important; border-top-color: #333 !important; }
body.dark-mode .bottom-nav-item { color: #aaa !important; }
body.dark-mode .bottom-sheet-panel { background: #1e1e1e; }
body.dark-mode .bottom-sheet-header { border-bottom-color: #333; }
body.dark-mode .bottom-sheet-body input,
body.dark-mode .bottom-sheet-body textarea,
body.dark-mode .bottom-sheet-body select,
body.dark-mode #urlImportInput {
  background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #555 !important;
}
body.dark-mode .bottom-sheet-body label { color: #ccc; }
body.dark-mode .bookmark-btn { border-color: rgba(255,255,255,0.35) !important; background: rgba(255,255,255,0.1) !important; color: #ccc !important; }
body.dark-mode .bookmark-btn .bookmark-icon { opacity: 0.6; }
body.dark-mode .bookmark-btn.bookmarked { border-color: var(--kuzina-accent) !important; background: rgba(0,150,136,0.18) !important; color: var(--kuzina-accent) !important; }
body.dark-mode .bookmark-btn.bookmarked .bookmark-icon { opacity: 1; }
body.dark-mode .bookmarks-header h1 { color: #e0e0e0; }
body.dark-mode .category-admin-item { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .category-admin-item h3,
body.dark-mode .category-admin-item p { color: #e0e0e0 !important; }
body.dark-mode .slogan-right { color: #e0e0e0 !important; }
body.dark-mode .dynamic-input { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #555 !important; }
body.dark-mode .instructions-list li { color: #e0e0e0; }
body.dark-mode .inline-recipe-form .dynamic-input { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #555 !important; }

body.light-mode { background-color: #f9f9f9; }