/* Combined site styles moved from inline blocks */
:root {
    /* default brand color — overridden by inline CSS var in MasterPage.php */
    --navbar-bg-color: #24282c;
    --navbar-fg-color: #b6b6b6;
    --navbar-hover-color: #ffffff;
    --bg: #fff;
    --fg: #1b1b1b;
    --fg-light: #a5a5a5;
    --fg-inv: #06241D;
    --panel-bg:#fff;
    --panel-fg:#06241D;
    --card-bg:#a0e3fc;
    --card-fg:#424242;    
    --sidebar-bg: #006B91;
    --success:rgb(61, 199, 68);
    --primary: #00B0F0;
    --primary-active: #5fd3fd;
    --primary-active-light: rgba(0, 176, 240, 0.25);
    --link-color: #0098cf;
    --link-color-hover: #00B0F0;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "Space Mono", ui-monospace, monospace;
}

html {
    height: 100%;
}

/* Start new page layout */

body {
    height: 100%;
    font-family: var(--font-body) !important;
    color: var(--fg) !important;
    background: var(--bg) !important;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

/* .logo and .logomark specific rules were removed — unused in public markup */
/* End new page layout */

#app-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding: 1.25rem;
    box-sizing: border-box;
    flex: 1 0 auto;
    overflow: visible;
}

footer {
    flex-shrink: 0;
}

.fg-dark {
    color: #666 !important;
}


.bg-card {
    background-color: var(--card-bg) !important;
    color: var(--card-fg) !important;
}

.bg-primary {
    background-color: var(--primary-active) !important;
    color: var(--fg) !important;
}

.bg-success {
    background-color: var(--success) !important;
    color: var(--bg) !important;
}

/* Global link styling: make regular links stand out, but exclude buttons and nav links */
a:not(.btn):not(.nav-link) {
    text-decoration: none;
    color: var(--link-color) !important;
}

a:not(.btn):not(.nav-link):visited {
    color: var(--link-color) !important;
}

a:not(.btn):not(.nav-link):hover,
a:not(.btn):not(.nav-link):focus {
    text-decoration: none;
    color: var(--link-color-hover) !important;
}

.table a:not(.btn) {
    text-decoration: none;
    color: var(--link-color) !important;
}

.table a:not(.btn):hover {
    text-decoration: none;
    color: var(--link-color-hover) !important;  
}

/* Override navbar color to requested brand color */
.navbar,
.navbar.bg-primary {
    background-color: var(--navbar-bg-color) !important;
    color: var(--navbar-fg-color) !important;
}

.site-logo {
    height: 34px;
    width: 34px;
    display: inline-block;
    vertical-align: middle;
}

.navbar-hamburger-toggler {
  /* Change background and border */
  background-color: var(--primary) !important;
  border-color: var(--link-color) !important;
}

/* Nav link styling */
.navbar .nav-link {
    font-size:15px !important;
    color: var(--navbar-fg-color) !important;
}

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

.navbar .nav-link.active {
    background: var(--primary) !important;
    border-radius: .25rem;
}
.navbar .nav-link.active:hover {
    background: var(--primary-active) !important;
}

.navbar .nav-link.active,
.navbar .nav-link.active:focus,
.navbar .nav-link.active:hover {
    color: #ffffff !important;
}

.navbar .navbar-nav.mx-auto {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    justify-content: center;
    gap: 0.5rem;
}

.navbar-brand {
    flex: 0 0 auto;
}

.navbar .navbar-nav.mx-auto .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    white-space: nowrap;
}

.navbar .navbar-nav.ms-auto {
    flex: 0 0 auto;
}

.navbar .container-fluid {
    align-items: center;
}

/* Tab control */
.nav-tabs .nav-link.active {
    background: var(--primary-active) !important;
    color: var(--fg-inv) !important;
    border-radius: .25rem;
}

.nav-tabs .nav-link {
    background: #eeeeee !important;
    color: var(--fg-light) !important;
    border-radius: .25rem;
}

.tab-content {
    /* background: #efefef !important; */
    /* border-color: var(--line) !important;
    border-style: solid;
    border-width: 1px 1px 1px 1px;*/
    border-radius: .25rem; 
}

/* Hover state: Fills with #4BA3C3 and turns text white */
.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light:focus {
    background-color: var(--primary-bg) !important;
}



.dropdown-menu .dropdown-item.active {
    background: rgba(0, 0, 0, 0.06);
}
.dropdown-menu .dropdown-item:hover {
    background-color:var(--primary-active) !important;
    color: #ffffff !important;
}

/* Styles moved from inc/_head_includes.php */
.form-check-input:not(:checked) {
    border-color: #999 !important;
}

.form-check-input:checked {
    background-color:var(--primary-active) !important;
    border-color: var(--primary) !important;
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(12, 125, 82, 0.25);
}

.form-check-input:checked:hover {
    filter: brightness(90%);
}



.btn-primary {
    color: white !important;
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

/* Hover state: Fills with #4BA3C3 and turns text white */
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: var(--primary-active) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}


.btn-check:checked+.btn-outline-primary {
    background-color: var(--primary-active-soft) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-outline-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(12, 125, 82, 0.25) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-active) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(12, 125, 82, 0.25) !important;
}
.btn-outline-primary:active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Ensure toggled/active outline buttons show the same active styling as :active state */
.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(12, 125, 82, 0.25) !important;
}


.alert-primary {
    background-color: var(--primary-active) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.alert-primary .alert-link {
    color: var(--primary) !important;
    text-decoration: underline;
}

button.btn.w-100[data-bs-toggle="collapse"]:hover,
button.btn.w-100[data-bs-toggle="collapse"]:focus {
    color: #000 !important;
}

button[data-bs-toggle="collapse"]:hover,
button[data-bs-toggle="collapse"]:focus {
    color: #000 !important;
}

/* Small utility for table highlight (used by dynamic scripts) */
.table-info {
    background-color: rgba(13, 110, 253, 0.075) !important;
}

.modal-content {
    background-color: var(--panel-bg) !important;
    color:var(--panel-fg)!important;
}

/* Define the reusable icon style */
.icon-danger-triangle {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  /* Your red triangle SVG encoded below */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23dc3545' stroke='rgba(0,0,0,0.2)' stroke-width='0.75' stroke-linejoin='round' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath fill='%23ffffff' d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
    /* 2. This shifts the entire element down 4px without shrinking it */
  transform: translateY(4px); 
}

/* Define the reusable icon style */
.icon-warning-triangle {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  /* Your yellow triangle SVG encoded below */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffc107' stroke='rgba(0,0,0,0.2)' stroke-width='0.75' stroke-linejoin='round' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath fill='%23666666' d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
  /* 2. This shifts the entire element down 4px without shrinking it */
  transform: translateY(4px);   
}

.icon-info-square {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Filled Info Square SVG URL-Encoded */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%230dcaf0%27%20stroke%3D%27rgba%280%2C0%2C0%2C0.15%29%27%20stroke-width%3D%270.75%27/%3E%3Cpath%20fill%3D%27%23ffffff%27%20d%3D%27m8.93%206.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738%203.468c-.194.897.105%201.319.808%201.319.545%200%201.178-.252%201.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275%200-.375-.193-.304-.533zM8%205.5a1%201%200%201%200%200-2%201%201%200%200%200%200%202%27/%3E%3C/svg%3E");
  transform: translateY(4px);   
}

.icon-info-circle {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Filled Info Square SVG URL-Encoded */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%277.6%27%20fill%3D%27%230dcaf0%27%20stroke%3D%27rgba%280%2C0%2C0%2C0.15%29%27%20stroke-width%3D%270.75%27/%3E%3Cpath%20fill%3D%27%23ffffff%27%20d%3D%27m8.93%206.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738%203.468c-.194.897.105%201.319.808%201.319.545%200%201.178-.252%201.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275%200-.375-.193-.304-.533zM8%205.5a1%201%200%201%200%200-2%201%201%200%200%200%200%202%27/%3E%3C/svg%3E");
  transform: translateY(4px);   
}

/* Define the reusable icon style */
.icon-temperature {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Thermometer SVG URL-Encoded */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M9.5 12.5a1.5 1.5 0 1 1-2-1.415V6.5a.5.5 0 0 1 1 0v4.585a1.5 1.5 0 0 1 1 1.415'/%3E%3Cpath fill='currentColor' d='M5.5 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0zM8 1a1.5 1.5 0 0 0-1.5 1.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0l-.166-.15V2.5A1.5 1.5 0 0 0 8 1'/%3E%3C/svg%3E");
  /* 2. This shifts the entire element down 4px without shrinking it */
  transform: translateY(4px); 
}

/* Define the reusable icon style */
.icon-humidity {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Droplet SVG URL-Encoded */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='currentColor' d='M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z'/%3E%3Cpath fill-rule='evenodd' fill='currentColor' d='M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z'/%3E%3C/svg%3E");
  /* 2. This shifts the entire element down 4px without shrinking it */
  transform: translateY(4px);   
}