/* Per-device theme preference. Dark mode is the first-visit default. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.theme-icon {
  font-size: 15px;
  line-height: 1;
}
@media (max-width: 760px) {
  .topbar-actions .theme-label {
    display: none;
  }
  .topbar-actions .theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
  }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf5ef;
  --muted: #b0beb4;
  --line: #405347;
  --surface: #24352b;
  --canvas: #17231b;
  --green: #55bd80;
  --green-dark: #73d99a;
  --green-soft: #2d4a37;
  --gold: #403724;
  --blue: #263943;
  --violet: #362f43;
  --shadow: 0 12px 34px #0005;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main-area {
  background: var(--canvas);
  color: var(--ink);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .search-box {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .topbar {
  background: #202923e8;
}
html[data-theme="dark"] .brand {
  color: #e5ece7;
}
html[data-theme="dark"] .brand-light {
  color: #a8b7ad;
}
html[data-theme="dark"] .nav-link {
  color: #b1bdb5;
}
html[data-theme="dark"] .nav-link:hover {
  background: #27332c;
}
html[data-theme="dark"] .nav-link.active {
  background: var(--green-soft);
  color: #88d5aa;
}
html[data-theme="dark"] .breadcrumbs strong {
  color: #dce6df;
}
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .button:not(.primary) {
  background: #28332c;
  color: #dce6df;
  border-color: #435248;
}
html[data-theme="dark"] .button.secondary:hover,
html[data-theme="dark"] .button:not(.primary):hover {
  background: #303e35;
  border-color: #5a6d60;
}
html[data-theme="dark"] .button.primary {
  background: #27865b;
  border-color: #45a66f;
  color: #fff;
}
html[data-theme="dark"] .button.primary:hover {
  background: #32a06a;
}
html[data-theme="dark"] .avatar {
  background: #304537;
  color: #a5e0bb;
}
html[data-theme="dark"] .modal-heading,
html[data-theme="dark"] .modal-actions {
  border-color: var(--line);
}
html[data-theme="dark"] .table-wrap th {
  background: #252f29;
  color: #a9b7ad;
  border-color: var(--line);
}
html[data-theme="dark"] .table-wrap td {
  color: #c2cec6;
  border-color: #303b34;
}
html[data-theme="dark"] .table-wrap td strong {
  color: #e2eae4;
}
html[data-theme="dark"] .table-wrap tbody tr:hover {
  background: #27332c;
}
html[data-theme="dark"] .modal-backdrop {
  background: #050907c9;
}
html[data-theme="dark"] .modal-form label {
  color: #b3c0b7;
}
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form select,
html[data-theme="dark"] .modal-form textarea,
html[data-theme="dark"] .toolbar select {
  background: #18211b;
  color: #e4ece6;
  border-color: #435248;
}
html[data-theme="dark"] .search-box input {
  color: #e4ece6;
}
html[data-theme="dark"] .modal-form input::placeholder,
html[data-theme="dark"] .modal-form textarea::placeholder {
  color: #7f9085;
}
html[data-theme="dark"] .modal-form input:focus,
html[data-theme="dark"] .modal-form select:focus,
html[data-theme="dark"] .modal-form textarea:focus {
  border-color: #58aa7b;
  box-shadow: 0 0 0 3px #294735;
}
html[data-theme="dark"] .text-button {
  color: #78c99d;
}