:root.theme-light, html[data-theme="light"] {
  --bg: #f8f9fa;
  --text: #212529;
  --card: #fff;
  --border: #dee2e6;
}
:root.theme-dark, html[data-theme="dark"] {
  --bg: #121212;
  --text: #e9ecef;
  --card: #1e1e1e;
  --border: #333;
}
body {
  background: var(--bg);
  color: var(--text);
}
.app-header {
  background: var(--card);
  border-color: var(--border) !important;
}
.card, .form-control, .form-select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
/* Ensure native selects stay recognizable as dropdowns (some themes strip chevron). */
select.form-select {
  appearance: auto;
  -webkit-appearance: menulist;
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 1030;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 0.75rem 0;
  margin-top: 1rem;
}

/* Mobile: sticky bottom is unreliable (bars stay below fold / hidden). Pin actions like an app footer. */
@media (max-width: 767.98px) {
  main.container:has(.sticky-actions) {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }

  .sticky-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding-top: 0.65rem;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }

  .sticky-actions .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .sticky-actions .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}