/* Final compatibility layer.
   Page-specific theme work belongs in each page CSS file. Keep this file small. */

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--fg);
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal,
html[data-theme="light"] .dialog,
html[data-theme="light"] .dropdown,
html[data-theme="light"] .startlist-menu {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .card input,
html[data-theme="light"] .card select,
html[data-theme="light"] .card textarea {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--muted-2) !important;
  -webkit-text-fill-color: var(--muted-2) !important;
}

html[data-theme="light"] select,
html[data-theme="light"] .round-sort-controls select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23172033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
}

html[data-theme="light"] .btn,
html[data-theme="light"] button:not([class]),
html[data-theme="light"] input[type="submit"],
html[data-theme="light"] input[type="button"] {
  background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border) !important;
  color: var(--btn-text) !important;
  -webkit-text-fill-color: var(--btn-text) !important;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] button:not([class]):hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

html[data-theme="light"] .btn.active,
html[data-theme="light"] .tabbar .btn.active,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] button.primary,
html[data-theme="light"] input[type="submit"] {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  -webkit-text-fill-color: var(--btn-primary-text) !important;
}

html[data-theme="light"] .app-flash {
  background: #eff6ff !important;
  border-color: rgba(37, 99, 235, .26) !important;
  color: var(--muted) !important;
}

html[data-theme="light"] .app-flash-error,
html[data-theme="light"] .alert-danger,
html[data-theme="light"] .error {
  background: var(--status-bad-bg) !important;
  border-color: var(--status-bad-border) !important;
  color: var(--status-bad-text) !important;
}

html[data-theme="light"] .app-flash-warning,
html[data-theme="light"] .alert-warning,
html[data-theme="light"] .warning {
  background: var(--status-warn-bg) !important;
  border-color: var(--status-warn-border) !important;
  color: var(--status-warn-text) !important;
}

html[data-theme="light"] .ok,
html[data-theme="light"] .success,
html[data-theme="light"] .alert-success {
  background: var(--status-ok-bg) !important;
  border-color: var(--status-ok-border) !important;
  color: var(--status-ok-text) !important;
}