#page {
  max-width: 700px;
}

#main {
  display: flex;
  flex-direction: column;
}

td.signal {
  width: 20px;
}

td.band {
  width: 40px;
  font-family: monospace;
  font-size: 12px;
}

td.security {
  text-align: right;
  width: 20px;
}

.can-connect {
  cursor: pointer;
}

.networks td {
  vertical-align: bottom;
}

@media screen and (max-width: 500px) {
  .button-text {
    display: none;
  }
}

@media screen and (min-width: 500px) {
  .button-icon {
    display: none;
  }
}

.modem-status {
  background: #eee;
  color: #000;
}

.button-slider-lock-unlock {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  height: 100%;
  font-size: 30px;
}

.button-slider-lock-unlock:hover {
  background-color: #6c757d;
}

.text-secondary {
  color: #6c757d !important;
}

td.sensor_name {
  width: 160px;
}

/* Dark mode theme */

body.dark {
  background: #1e2326;
  color: #fff;
}

body.dark .card {
  background: #1e2326;
  border-color: rgba(255, 255, 255, 0.5);
}

body.dark .card-body {
  color: #fff;
}

body.dark .table {
  --bs-table-color: var(--bs-gray-100);
  --bs-table-bg: var(--bs-dark);
  --bs-table-border-color: var(--bs-gray-700);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-striped-color: var(--bs-gray-100);
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-active-color: var(--bs-gray-100);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
  --bs-table-hover-color: var(--bs-gray-100);
  color: var(--bs-table-color);
  background-color: var(--bs-table-bg);
  border-color: var(--bs-table-border-color);
}

body.dark .table th,
body.dark .table td,
body.dark .table thead th,
body.dark .table tbody + tbody {
  border-color: var(--bs-table-border-color);
}

body.dark .table-group-divider {
  border-top-color: var(--bs-secondary-bg);
}

body.dark .caption-top {
  color: var(--bs-gray-500);
}

body.dark .table-bordered th,
body.dark .table-bordered td {
  border-color: var(--bs-table-border-color);
}

body.dark .form-control,
body.dark .ui-widget-content,
body.dark .form-select {
  background-color: #eee;
}

body.dark .btn-outline-secondary {
  color: #eee;
}

body.dark .text-secondary {
  color: #9ca5ad !important;
}

body.dark .modal-content {
  background-color: #1e2326;
}

body.dark .close {
  color: #fff;
}

body.dark .table-hover tbody tr:hover {
  color: #aaa;
}

body.dark .modem-status {
  background: #5a6268;
  color: #fff;
}

body.dark .button-slider-lock-unlock {
  background-color: #676a6c;
  border: 1px solid #676a6c;
}

body.dark .button-slider-lock-unlock:hover {
  background-color: #9a9fa2;
}

.form-label[for="autoStart"] {
  margin-bottom: 0 !important;
}

/* WiFi card styling */
/* Ensure buttons are full width across the card */
.wifi-settings .wifi-scan-button,
.wifi-settings .hotspot-mode {
  width: 100%;
  display: block;
}

/* Add spacing below connected status */
.wifi-settings .connected {
  margin-bottom: 0.5rem;
}

/* Remove flex display from rows which caused layout issues */
.wifi-settings tbody tr {
  width: 100%;
}

/* Position disconnect/forget buttons correctly */
.wifi-settings .disconnect,
.wifi-settings .forget {
  margin-left: 0.25rem;
  float: right;
}

/* Ensure table fills entire width of card */
.wifi-settings .table {
  width: 100%;
}

/* Make Hotspot mode button full width, across the entire row */
.wifi-settings .hotspot-mode {
  display: block;
  width: 100%;
  margin-top: 1rem;
}


/* layoutSetting: bitrate info on top */
body.netif-first #netifTable {
  order: -2;
}

body.netif-first #sensorsTable {
  order: -1;
}