/*
    belaUI - web UI for the BELABOX project
    Copyright (C) 2020-2022 BELABOX project

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

#page {
  max-width: 700px;
}

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

#login, #initialPasswordForm {
  max-width: 400px;
}

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;
}

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

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

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 .table {
  color: #fff;
}

body.dark .form-control, body.dark .ui-widget-content, body.dark .custom-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;
}

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

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

/* layoutSetting: bitrate info on top */

body.netif-first #netifTable {
  order: -2;
}

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


/* Private remote dashboard */
#page { max-width: 980px; }
.private-dashboard { border-radius: .75rem; background: linear-gradient(145deg, #20272b, #171c1f); padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.22); color: #fff; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.dashboard-title { font-size:1.45rem; margin:0; font-weight:700; }
.dashboard-subtitle { color:#aeb8be; font-size:.88rem; }
.dashboard-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.status-card { background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.11); border-radius:.65rem; padding:.85rem; min-height:96px; display:flex; flex-direction:column; }
.status-label { color:#aeb8be; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.status-value { font-size:1.28rem; line-height:1.5; overflow-wrap:anywhere; }
.status-card small { color:#c2c9cd; margin-top:auto; }
.telemetry-panel { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); border-radius:.65rem; padding:.75rem; }
.telemetry-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
#throughputChart { width:100%; max-height:150px; display:block; }
.diagnostics-card { background:rgba(255,255,255,.045)!important; border-color:rgba(255,255,255,.12)!important; }
.diagnostics-card .card-header { background:transparent; }
.diagnostic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.diagnostic-grid>div { display:flex; flex-direction:column; background:rgba(255,255,255,.05); border-radius:.4rem; padding:.55rem; }
.diagnostic-grid span { color:#aeb8be; font-size:.74rem; }
.raw-state { max-height:360px; overflow:auto; padding:.7rem; border-radius:.45rem; background:#111618; color:#d8e0e4; font-size:.72rem; white-space:pre-wrap; word-break:break-word; }
.status-ok { color:#64d98b; }
.status-warn { color:#ffc75f; }
.status-bad { color:#ff7b86; }
@media (max-width: 760px) { .status-grid,.diagnostic-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .dashboard-header{align-items:flex-start;flex-direction:column;} .dashboard-actions{width:100%;justify-content:flex-start;} }
@media (max-width: 420px) { .status-grid,.diagnostic-grid{grid-template-columns:1fr;} }
body:not(.dark) .private-dashboard { background:linear-gradient(145deg,#263238,#1d2529); }