html {
  font-size: 14px;
}

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

html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; background-color: #1e1e1e; color: #d4d4d4; }

/* Links */
a { color: #4fc1ff; }
a:hover { color: #9cdcfe; }

/* Navbar */
.navbar { background-color: #2d2d2d !important; }
.navbar .nav-link { color: #d4d4d4 !important; }
.navbar .nav-link:hover { color: #ffffff !important; }
.navbar-brand { color: #ffffff !important; }

/* Cards and tables */
.card { background-color: #252526; color: #d4d4d4; border: 1px solid #3c3c3c; }
.card-header { background-color: #2d2d2d; border-bottom: 1px solid #3c3c3c; }
.table { color: #ffffff; } /* pure white text */
.table-striped tbody tr td { color: #ffffff; } /* ensure row text is bright */
.table-striped tbody tr:nth-of-type(odd) { background-color: #1f1f1f; }
.table thead { background-color: #2d2d2d; color: #ffffff; }
.table td, .table th { border-color: #3c3c3c; }

/* Forms */
.form-control, .form-select { background-color: #1e1e1e; color: #e6e6e6; border: 1px solid #3c3c3c; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.1rem #3c3c3c, 0 0 0 0.25rem #007acc; border-color: #007acc; }
.form-label { color: #e6e6e6; }
.form-check-input { background-color: #1e1e1e; border-color: #3c3c3c; }

/* Buttons */
.btn-primary { background-color: #0e639c; border-color: #0e639c; }
.btn-primary:hover { background-color: #1177bb; border-color: #1177bb; }
.btn-secondary { background-color: #3c3c3c; border-color: #3c3c3c; color: #e6e6e6; }
.btn-secondary:hover { background-color: #4b4b4b; border-color: #4b4b4b; }
.btn-danger { background-color: #ce9178; border-color: #ce9178; color: #1e1e1e; }
.btn-danger:hover { background-color: #e0a38e; border-color: #e0a38e; }
.btn-success { background-color: #6a9955; border-color: #6a9955; }
.btn-success:hover { background-color: #7fb06a; border-color: #7fb06a; }

/* Alerts */
.alert-info { background-color: #063b49; color: #e6e6e6; border-color: #0b5466; }
.alert-warning { background-color: #3f2d00; color: #e6e6e6; border-color: #5a3f00; }
.alert-danger { background-color: #5a1d1d; color: #ffffff; border-color: #7a2626; }
.alert-success { background-color: #1f3b1f; color: #e6e6e6; border-color: #2b4f2b; }

/* Delete confirm dark orange */
.bg-delete-confirm { background-color: #5a3f00; color: #fff; }

/* Footer */
.footer { background-color: #2d2d2d; color: #d4d4d4; }

/* Progress bar */
.progress { background-color: #3c3c3c; }
.progress-bar { background-color: #0e639c; }
.progress-bar.bg-secondary { background-color: #3c3c3c !important; color: #e6e6e6; }

/* Inputs placeholder */
::placeholder { color: #b0b0b0; }

/* Border / divider */
.border, .box-shadow { border-color: #3c3c3c !important; }

/* MQTT status dot */
.mqtt-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.mqtt-dot.connected { background-color: #6a9955; }
.mqtt-dot.disconnected { background-color: #ce9178; }

/* Focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #3c3c3c, 0 0 0 0.25rem #007acc;
}