html {
  font-size: 14px;
}

:root {
  /* light theme (default) */
  --bg: #ffffff;
  --fg: #212529;
  --muted: #6c757d;
  --link: #0d6efd;
  --card-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0d1117;
    --fg: #e6edf3;
    --muted: #9aa6b2;
    --link: #58a6ff;
    --card-bg: #0f1720;
  }
}

:root[data-theme='dark'] {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #9aa6b2;
  --link: #58a6ff;
  --card-bg: #0f1720;
}

:root[data-theme='light'] {
    --bg: #ffffff;
    --fg: #212529;
    --muted: #6c757d;
    --link: #0d6efd;
    --card-bg: #ffffff;
    --input-bg: #dddddd;
    --input-border: #ced4da;
    --input-fg: #212529;
    --table-bg: #dddddd;
    --table-border: #dee2e6;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(255,255,255,0.06), 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--bg);
  color: var(--fg);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

a { color: var(--link); }

.navbar, .footer, .card {
  background-color: var(--card-bg) !important;
}

/* Ensure Bootstrap utility classes don't force dark text when dark theme is active */
:root[data-theme='dark'] .text-dark,
:root[data-theme='dark'] .nav-link.text-dark,
:root[data-theme='dark'] .navbar .nav-link,
:root[data-theme='dark'] .footer,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .btn-link {
  color: var(--fg) !important;
}

:root[data-theme='dark'] .text-muted {
  color: var(--muted) !important;
}

/* When following system dark mode (no explicit data-theme='light'), apply same overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .text-dark,
  :root:not([data-theme='light']) .nav-link.text-dark,
  :root:not([data-theme='light']) .navbar .nav-link,
  :root:not([data-theme='light']) .footer,
  :root:not([data-theme='light']) .card,
  :root:not([data-theme='light']) .btn-link {
    color: var(--fg) !important;
  }

  :root:not([data-theme='light']) .text-muted {
    color: var(--muted) !important;
  }
}

/* Toggler icon and brand color for dark theme */
:root[data-theme='dark'] .navbar-brand,
:root[data-theme='dark'] .navbar-toggler-icon {
  color: var(--fg) !important;
}

/* Use a white SVG toggler icon in dark mode */
:root[data-theme='dark'] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(230,237,243,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .navbar-brand,
  :root:not([data-theme='light']) .navbar-toggler-icon {
    color: var(--fg) !important;
  }

  :root:not([data-theme='light']) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(230,237,243,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Inputs, selects, radios, checkboxes and tables - adapt to theme using variables */
.form-control,
.form-control-plaintext,
.form-select {
  background-color: var(--input-bg) !important;
  color: var(--input-fg) !important;
  border-color: var(--input-border) !important;
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--muted) !important;
}

.form-check-input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-fg);
}

/* Tables */
.table,
.table td,
.table th {
  background-color: var(--table-bg) !important;
  color: var(--fg) !important;
  border-color: var(--table-border) !important;
}

/* When following system dark mode (no explicit data-theme='light'), ensure same styling */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --input-bg: #0b1318;
    --input-border: #22303a;
    --input-fg: #e6edf3;
    --table-bg: #0b1418;
    --table-border: #1f2a33;
  }
}