:root {
  --ui-scale: 1;
  /* Light theme (default) */
  --bg-color: #f0f0f0;
  --text-color: #111;
  --table-bg: #fff;
  --border-color: #ccc;
  --shadow-color: #ccc;
  --accent-color: #0078d7;
  --background-image: url('background-day.png');
}
body { 
  font-family: sans-serif; 
  padding: 1rem;
  color: var(--text-color);
  background: var(--bg-color);
  background-image: var(--background-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  transition: background-color 0.5s ease, color 0.5s ease, background-image 0.8s ease;
}
body.dark-mode {
  --bg-color: #1b1b1b;
  --text-color: #eee;
  --table-bg: #2a2a2a;
  --border-color: #444;
  --shadow-color: #0008;
  --accent-color: #66b2ff;
  --background-image: url('background-night.png');
}
input[type="text"] {
  width:100%;
  flex-grow:1;
  padding: 0.5rem;
  font-size: 1.2rem;
}
.dark-mode input {
  background: #222; 
  color: #ddd; 
}
/* input[type="checkbox"] { display:none; } */
table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  border-radius: 0.5rem;
  background: var(--table-bg);
  box-shadow: 0 0 5px var(--shadow-color);
}
th, td {
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  text-align: left;
}
.hide-id .id-col { display: none; }
button {
  margin-top: 0rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: #b0d8ff;
}
.dark-mode button {
  background: #222; 
  color: #ddd; 
}
.icon-toggle {
/*  font-size: 1.4rem;
  background: none; 
  border: none;
  cursor: pointer;
*/  transition: transform 0.2s ease;
}
.icon-toggle:hover {
  transform: scale(1.2);
}
.icon-toggle {
/*  font-size: 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
*/  transition: transform 0.2s ease, color 0.2s ease;
}
.icon-toggle.active {
  color: var(--accent-color);
  transform: scale(1.15);
}
.dark-mode .results { 
  background: #222; 
  color: #ddd; 
  box-shadow: 0 0 5px #000; 
}
.dark-mode .zoom-controls {
  background: #222;
  box-shadow: 0 0 5px #000;
}
#resultsLog { max-height: calc(100vh / var(--ui-scale)); overflow-y: auto; margin-top: 1rem; padding: 0rem; }
#appRoot { transform: scale(var(--ui-scale)); transform-origin: top left; width: calc(100% / var(--ui-scale)); }
#footer { position: fixed; bottom: 1rem; color: var(--bg-color); z-index: -1; transform: scale(var(--ui-scale)); transform-origin: bottom left; }
.searchbar { display:flex; width:100%; }
.results { font-style:italic; color:#666; padding:1em; margin-bottom:1rem; background:#fff; border-radius:0.5rem; box-shadow:0 0 5px #ccc; display:flex; flex-direction:column; gap:.5rem; }
.zoom-controls { position: sticky; top: 0; display: inline-flex; gap: .5rem; align-items: center; background: #fff; padding: .25rem .5rem; border-radius: .5rem; box-shadow: 0 0 5px #ccc; z-index: 10; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #f7f7f7; }
.dark-mode .clickable-row:hover { background: #101010; }
.row-edit { display: none; padding: .35rem .6rem; margin: 0.1rem; }
.row-delete { padding: .35rem .6rem; margin: 0.1rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin-top:1rem; }
.padding { width: 1rem; }
.group { display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.group label { display:inline-flex; gap:.35rem; align-items:center; font-size:.95rem; }