:root{
  --main-bg: rgb(232,236,239);
  --main-blue: rgb(0,122,255);
  --main-text: rgb(33,37,41);
  --main-text-light: rgb(232,236,239);
  --text-style: sans-serif;
  --main-red: rgb(230,0,0);
  --main-dark-gray: rgb(160,160,160);
  --main-light-gray: rgb(230,230,230);
  --main-black: rgb(50,50,50);

  --nav-font: 0.95rem;
  --nav-brand-font: 1.05rem;
  --nav-link-py: 0.18rem;
  --nav-link-px: 0.60rem;
  --nav-inner-py: 0.20rem;
  --nav-inner-px: 1.10rem;

  --tbl-font: 0.95rem;
  --tbl-cell-py: 0.42rem;
  --tbl-cell-px: 0.55rem;
}

@media (max-width: 992px){
  :root{
    --nav-font: 0.90rem;
    --nav-brand-font: 1.00rem;
    --nav-link-py: 0.16rem;
    --nav-link-px: 0.55rem;
    --nav-inner-py: 0.16rem;
    --nav-inner-px: 0.85rem;

    --tbl-font: 0.90rem;
    --tbl-cell-py: 0.34rem;
    --tbl-cell-px: 0.45rem;
  }
}

@media (max-width: 576px){
  :root{
    --nav-font: 0.85rem;
    --nav-brand-font: 0.95rem;
    --nav-link-py: 0.14rem;
    --nav-link-px: 0.45rem;
    --nav-inner-py: 0.14rem;
    --nav-inner-px: 0.60rem;

    --tbl-font: 0.85rem;
    --tbl-cell-py: 0.24rem;
    --tbl-cell-px: 0.35rem;
  }
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, svg, video{
  max-width: 100%;
}

body{
  background-color: var(--main-bg);
  font-family: var(--text-style);
  padding-top: 3.2rem;
  color: var(--main-text);
  margin: 0;
}

h1{
  color: var(--main-text);
  font-weight: 600;
}

.navbar-compact{
  background-color: var(--main-blue);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  border-bottom: none;
  width: 100%;
  padding: var(--nav-link-py) 0;
  justify-content: center;
}

.navbar-compact .navbar-inner{
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-inner-py) var(--nav-inner-px);
  border-bottom: 0;
}

@media (max-width: 991.98px){
  .navbar-compact .navbar-inner{
    justify-content: space-between;
  }
  .navbar-compact .navbar-collapse{
    width: 100%;
    margin-top: 0.35rem;
  }
  .navbar-compact .navbar-nav .nav-link{
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .navbar-user-name{
    margin-left: 0 !important;
  }
  .navbar-compact .nav-link.me-3{
    margin-right: 0.25rem !important;
  }
}

.navbar-compact .navbar-brand{
  color: var(--main-text-light);
  font-weight: 700;
  font-size: var(--nav-brand-font);
  text-decoration: none;
  padding-top: var(--nav-link-py);
  padding-bottom: var(--nav-link-py);
  white-space: nowrap;
}

.navbar-compact .navbar-brand:hover,
.navbar-compact .navbar-brand:focus{
  color: var(--main-text-light) !important;
  text-decoration: none;
}

.navbar-compact .nav-link{
  color: var(--main-text-light) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  padding: var(--nav-link-py) var(--nav-link-px);
  font-size: var(--nav-font);
  line-height: 1.2;
}

.navbar-compact .nav-link:hover{
  color: var(--main-text) !important;
}

.navbar-user-name .nav-link{
  font-weight: 600;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px){
  .navbar-user-name .nav-link{
    max-width: 100%;
  }
}

.btn-exit{
  background-color: var(--main-red);
  border-color: var(--main-blue);
  color: var(--main-text-light);
  font-weight: 500;
  border-radius: 0.375rem;
  padding: calc(var(--nav-link-py) + 0.05rem) 0.75rem;
  line-height: 1.1;
}

.btn-exit:hover{
  background-color: var(--main-red);
  border-color: rgb(0,102,214);
  color: var(--main-text);
}

.navbar-toggler{
  border-color: var(--main-text);
  padding: 0.15rem 0.4rem;
}

.navbar-toggler-icon{
  filter: invert(20%);
}

.page-fullwidth{
  max-width: 100%;
}

.page-inner{
  width: 100%;
}

.page-fullwidth .page-inner{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.stats-row{
  max-width: 1200px;
  margin: 0 auto;
}

.chart-card{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.stats-title{
  text-align: center;
  font-weight: 300;
}

.stat-card{
  background-color: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-icon{
  width: 28px;
  height: 28px;
}

.stat-label{
  font-size: 0.9rem;
  color: var(--main-text);
}

.stat-value{
  font-size: 1.6rem;
  font-weight: 600;
}

.stat-card .text-dark{ color: var(--main-text) !important; }
.stat-card .text-success{ color: #198754 !important; }
.stat-card .text-danger{ color: #dc3545 !important; }

.card{
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.05);
}

.card-title{
  color: var(--main-text);
  font-weight: 500;
}

.map-label{
  font-size: 0.9rem;
  color: var(--main-text);
}

.map-select{
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 0.9rem;
}

.text_form{
  font-size: 0.9rem;
  color: var(--main-text);
}

.input-frame{
  border: 2px solid #000;
  border-radius: 4px;
  padding: 2px;
}

.input-frame input{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
}

.form-check-input.checkbox-black{
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

.form-check-input.checkbox-black:focus{
  box-shadow: 0 0 0 0.15rem rgba(0,0,0,.25) !important;
  border-color: #000 !important;
}

.form-check-input.checkbox-black:checked{
  background-color: #000 !important;
  border-color: #000 !important;
}

.switch-big .form-check-input{
  transform: scale(1.1);
  cursor: pointer;
}

.btn-primary{
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

.btn-primary:hover{
  background-color: rgb(0,102,214);
  border-color: rgb(0,102,214);
}

.btn-primary.btn-sm{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.85rem;
}

.filter-btn{
  min-width: 200px;
  font-weight: 500;
}

.filter-btn-on,
.filter-btn-on:hover,
.filter-btn-on:focus,
.filter-btn-on:active{
  background-color: var(--main-dark-gray) !important;
  border-color: var(--main-black) !important;
  color: #fff !important;
}

.filter-btn-off,
.filter-btn-off:hover,
.filter-btn-off:focus,
.filter-btn-off:active{
  background-color: var(--main-light-gray) !important;
  border-color: var(--main-black) !important;
  color: var(--main-black) !important;
}

.safety-badge,
.total-badge{
  display: inline-block;
  padding: 6px 6px;
  min-width: 80px;
  border-radius: 8px;
  background-color: var(--main-black);
  color: #fff;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
}

.evants-badge{
  display: inline-block;
  padding: 6px 6px;
  min-width: 80px;
  border-radius: 8px;
  background-color: #dc3545;
  color: #fff;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
}

.active-badge{
  display: inline-block;
  padding: 6px 6px;
  min-width: 80px;
  border-radius: 8px;
  background-color: #198754;
  color: #fff;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
}

.btn-enter{
  background-color: var(--main-blue);
  color: var(--main-text-light);
  border: none;
  border-radius: 6px;
  border-width: 1px;
  padding: 10px 25px;
}

.auth-page{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 4.5rem);
}

.auth-card{
  width: min(800px, calc(100% - 24px));
  margin: 2rem auto 0;
  border-radius: 16px;
}

.devices-page{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.devices-title{
  font-weight: 500;
  color: var(--main-black);
}

.table-card{
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.05);
}

.table,
.devices-table{
  font-size: var(--tbl-font);
}

.table > :not(caption) > * > *,
.devices-table > :not(caption) > * > *{
  padding: var(--tbl-cell-py) var(--tbl-cell-px);
}

.devices-table thead,
.devices-table thead th{
  background-color: var(--main-blue);
  color: var(--main-text-light);
}

.devices-table thead th{
  font-weight: 500;
  border-bottom-width: 0;
  white-space: nowrap;
}

.devices-table tbody tr:nth-of-type(odd){
  background-color: #f5f6ff;
}

.devices-table tbody tr:nth-of-type(even){
  background-color: #fff;
}

.devices-table tbody tr:hover{
  background-color: inherit;
}

.devices-table td,
.devices-table th{
  border: 2px solid var(--main-black);
  text-align: center;
  vertical-align: middle;
}

.table-responsive{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.devices-page .btn-primary{
  background-color: var(--main-blue);
  border-color: var(--main-black);
  color: var(--main-text-light);
}

.devices-page .btn-primary:hover,
.devices-page .btn-primary:focus{
  background-color: rgb(0,102,214);
  border-color: rgb(0,102,214);
  filter: brightness(1.05);
}

.user-card{
  width: 100%;
  max-width: 1000px;
  margin: 1.5rem 0 0 0;
  border-radius: 16px;
}

.user-card .card-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.user-card .row{
  width: 100%;
  justify-content: flex-start !important;
}

.user-card .center-only{
  align-self: center;
  text-align: center;
}

.event-power-on{
  background-color: #d4edda !important;
  color: #000 !important;
  font-weight: 300 !important;
  font-family: sans-serif;
  font-size: 16px;
}

.event-power-off{
  background-color: #fc0217 !important;
  color: #000 !important;
  font-weight: 300 !important;
  font-family: sans-serif;
  font-size: 16px;
}

.event-type1{
  background-color: #fff !important;
  color: #000 !important;
  font-weight: 300 !important;
  font-family: sans-serif;
  font-size: 16px;
}

.event-type2{
  background-color: rgb(237,190,200) !important;
  color: #000 !important;
  font-weight: 300 !important;
  font-family: sans-serif;
  font-size: 16px;
}

.event-type3{
  background-color: #46afc6 !important;
  color: #000 !important;
  font-weight: 300 !important;
  font-family: sans-serif;
  font-size: 16px;
}

.dev-on{ background-color: #d4edda !important; }
.dev-off{ background-color: #f8d7da !important; }
.dev-unknown{ background-color: #fff !important; }

.monitoring-toolbar .monitoring-device{ width: 220px; }
.monitoring-toolbar .monitoring-period{ width: 320px; }

@media (max-width: 992px){
  .monitoring-toolbar .monitoring-device{ width: 200px; }
  .monitoring-toolbar .monitoring-period{ width: 260px; }
}

@media (max-width: 576px){
  .monitoring-toolbar .monitoring-device,
  .monitoring-toolbar .monitoring-period{ width: 100%; }
  .monitoring-toolbar .monitoring-btn{ width: 100%; }
}

#map{
  width: 100%;
  height: 70vh;
  min-height: 480px;
}

.map-toolbar .map-device{ width: 260px; }
.map-toolbar .map-period{ width: 360px; }

@media (max-width: 992px){
  .map-toolbar .map-device{ width: 220px; }
  .map-toolbar .map-period{ width: 280px; }
}

@media (max-width: 576px){
  .map-toolbar .map-device,
  .map-toolbar .map-period{ width: 100%; }
  .map-toolbar .map-buttons{ width: 100%; }
  .map-toolbar .map-buttons > *{ width: 100%; }
}

.chart-wrap{
  height: 320px;
}