:root {
    --semantic-warning-100: #FFF6C6;
    --semantic-warning-400: #EE8000;
    --semantic-positive-100: #DFF9E4;
    --semantic-positive-600: #28A745;
    --semantic-negative-100: #FEE6E5;
    --semantic-negative-600: #DC3545;
    --bs-body-color: #3B4457;
    --bs-body-font-size: 12px;
}

body {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    color: var(--bs-body-color);
}

@supports (font-variation-settings: normal) {
    body { font-family: InterDisplay, sans-serif; }
}

.material-symbols-outlined {
    color: #3B4457;
    width: 12px;
    font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

.caption-regular {
    font-weight: 400; /* Regular weight */
}
.body-02-semibold {
    font-weight: 600; /* Semibold weight */
}
.body-02-medium,
.display-2 {
    font-weight: 500;
}

.card, 
.card-body,
.card-header {
    border: none;
    border-width: 0;
}

.card,
.card-body {
    height: 100%;
}

.logo-card {
    width: 160px;
}

.logo-card,
.nbm-col {
    height: 160px;
}

.logo-img {
    width: 80%;
}

.card-body {
    padding: 0.5rem;
}

.btn {
    font-size: 10px;
    font-weight: 500;
    border-width: 0;
}



.row-dashboard-3 .card .card-body {
    background-color: white;
}

.row-dashboard-3-content {
    background-color: #EDF0F5;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    max-width: 100%;
    min-width: 0;
}

#val-temperature {
    font-size: 28px;
    line-height: 28px;
    font-weight: 500;
}

.text-status {
    font-size: 12px;
    color: #3B4457;
}

.btn-save {
    font-size: 16px;
    color: white !important;
    --bs-btn-bg: #5533A4;
    opacity: 60%;
}

.btn-save:hover {
    background-color: #5533A4;
    opacity: 80%;
}
.btn-save:active {
    --bs-btn-active-bg: #5533A4;
    opacity: 100%;
}

.card-last-feedback {
    max-width: 360px;
}

.row-dashboard-3 {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
}

.row-dashboard-3 > .dashboard-card-col {
    min-width: 0;
}

.row-dashboard-3 > .dashboard-card-col-temperature {
    flex: 0 0 auto;
}

.row-dashboard-3 > .dashboard-card-col-real-time-data {
    flex: 0 0 auto;
    min-width: max-content;
}

.row-dashboard-3 > .dashboard-card-col-last-data {
    flex: 0 0 auto;
}

.row-dashboard-3 > .dashboard-card-col-last-feedback {
    flex: 0 0 auto;
    min-width: max-content;
}

.row-dashboard-3 > .dashboard-card-col > .card {
    width: 100%;
    min-width: 0;
}

.row-dashboard-3-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

#real-time-data {
    flex-shrink: 0;
    white-space: nowrap;
    /* Compact so the Last KLH Feedback card fits on the row. */
    font-size: 11px;
    gap: 0.375rem !important;
    padding: 0.25rem 0.375rem;
}

#real-time-data .hstack {
    gap: 0.375rem !important;
}

#last-feedback > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-last-data,
.card-real-time-data,
.card-temperature,
.card-last-feedback {
    height: 90px;
    display: grid;
    grid-template-rows: auto 1fr;
}

#dashboard-current-date-time {
    width: 100%;
}

.settings-row .col:nth-child(n+3) .form-label {
    margin-top: .5rem;
}

#ph-card-modal,
#tss-card-modal,
#debit-card-modal,
#cod-card-modal,
#nh3n-card-modal {
    gap: 0.5rem;
    display: flex;
    flex-direction: row;
    height: 34px;
    align-items: center;
    width: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    border-radius: 8px 0 0 8px;
}

.current-parameter-modal {
    font-size: 16px;
}

.current-value-modal {
    font-size: 20px;
}

.logs-graph {
    padding: 0;
}

.modebar-container {
    top: -20px !important;
}

.modal-content{
    background-color: #EDF0F5;
}

.modal-footer{
    border-top: 0;
}
.btn-graph-group {
    background-color: #D3D6DE;
    border-radius: 6px;
    padding: 4px;
}
.btn-graph {
    border-radius: 6px !important;
    color: #3B4457;
    background-color: #D3D6DE;
    box-shadow: none;
    padding: 3px 6px 3px 6px;
}
.btn-graph.active {
    color: #3B4457;
    background: white;
    box-shadow: none;
}



.row-reports .card-body {
    padding-top: 0;
}

table {
    font-family: inherit !important;
    --text-color: var(--bs-body-color) !important; 
}

.current-body {
    background-color: #EDF0F5;
    border-radius: 8px 8px 0 0 !important;
}

.card, 
.card-body,
.card-header{
    border-radius: 8px;
}

.card-header {
    font-size: 10px;
    font-weight: 500;
    background-color: white;
    color:#5533A4;
    padding: 0.5rem;
    padding-bottom: 0;
}

.card-header.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    min-height: 2.6em;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #5533A4;
    margin-bottom: 0.5rem;
}

#circle {
    margin-right: 0.25rem;
    height:7px;
    width: 7px;
}

.reference-parameter {
    font-size: 8px;
}

.reference-value {
    font-size: 11px !important;
    text-wrap: nowrap;
    width: 100%;
}

/* row-dashboard-2: cards auto-shrink to fill the row (like production) up to
   7 per line; anything past 7 continues on a new row at the same card width
   instead of scrolling or squeezing indefinitely. */
#row-current-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}
#row-current-values .col {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
/* A hidden custom-sensor Card ({'display': 'none'} set by the callback for
   unconfigured slots) would otherwise still claim a grid track as a blank
   column; drop it out of grid flow entirely so only visible cards are laid
   out. Production has no custom-sensor slots so this rule has no equivalent
   there. */
#row-current-values .col:has(> .card[style*="display: none"]) {
    display: none;
}
.current-parameter {
    font-size: 12px;
    font-weight: 500;
}
.current-value {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    height: 28px;
}
.current-unit {
    font-size: 12px;
    font-weight: 600;
}

.form-control,
.form-select {
    background-color: #EDF0F5;
    font-size: 12px;
    font-weight: 500;
    color: #1F242E;
}

.form-control::placeholder {
    opacity: 60%;
    color: #666E80;
}

.btn:disabled {
    border-width: 0;
}

@media (min-width: 801px) {
    .container-fluid#page-container {
        max-width: 1280px;
        width: 100%;
        margin: auto;
        padding-top: 1.5rem;
        padding-bottom: 3rem;
        border-width: 1px;
    }

    /* Settings has room to breathe -- wider grid means less-cramped custom
       sensor table and send-config panels, instead of staying capped at the
       dashboard's narrower 800px. */
    .container-fluid#page-container:has(.settings-page) {
        width: 95% !important;
        max-width: 1300px;
    }

    .modal-dialog {
        max-width: 100%;
    }

    .modal-content {
        width: 800px;
        margin: auto;
    }
}

.btn {
    border-radius: 10px;
}

.btn-detail{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--bs-body-color);
}

.btn-success,
.btn-warning,
.btn-danger {
    color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;
}

#app-layout{
    background-color: #EDF0F5;
}

.negative {
    background-color: var(--semantic-negative-100);
    color: var(--semantic-negative-600);
}

.warning {
    background-color: var(--semantic-warning-100);
    color: var(--semantic-warning-400);
}

.positive {
    background-color: var(--semantic-positive-100);
    color: var(--semantic-positive-600);
}

.negative .card-body,
.warning  .card-body,
.positive .card-body {
    background-color: inherit !important;   
}

.reference-value,
.reference-value,
.reference-value {
    color: inherit;
    font-weight: 600;
    font-size: 1.25rem;
}

#dash-header img{
    height: 0.8rem;
    vertical-align: unset;
}

#circle-container {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

#circle-container p{
    margin-bottom: 0;
}

#circle {
    margin-right: 0.25rem;
    height:7px;
    width: 7px;
    border-radius: 50%;
}

.bg-red {
    background-color: red;
}

.bg-orange {
    background-color: orange;
}

.bg-green {
    background-color: green;
}

.nav{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.25rem;
    background-color: white;
    height: auto;
    width: auto;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index:1000;
    margin: auto;
}

.reboot-dock {
    position: fixed;
    bottom: 0.25rem;
    left: 1rem;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Bottom bar: a fixed, solid strip along the bottom edge. The Restart button + device IP
   (.reboot-dock) sit on it at the left, the navbar in the centre and the copyright (.watermark)
   at the right. The page content ends above it: #page-container reserves the bar height as
   padding (border-box, so short pages do not gain extra scroll), and the bar's solid background
   hides anything that would otherwise scroll beneath it. */
:root {
    --bottom-bar-h: 2.75rem;
}

#page-container {
    padding-bottom: var(--bottom-bar-h);
}

.page-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bottom-bar-h);
    z-index: 999; /* below the dock and navbar (1000) that sit on it */
    background: inherit; /* #app-layout's page background */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* Same type as the i-Log 4.0 footer (.watermark): 8px / 400 / #1F242E, inherited
   font and line-height. The negative margin cancels the dock's bottom offset so the text
   sits on the same bottom edge as the footer's copyright line. */
.host-ip {
    font-size: 8px;
    font-weight: 400;
    color: #1F242E;
    margin-bottom: -0.25rem;
}

.reboot-fab {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #F8F9FA;
    border: 1px solid #D3D6DE;
    color: #3B4457;
}

.reboot-fab .material-symbols-outlined {
    width: 24px;
    font-size: 24px;
    line-height: 1;
}

.watermark p{
    color: #1F242E;
    margin-bottom: 0;
}

.watermark:first-child{
    font-size: 10px;
    font-weight: 600;
}

.watermark:last-child{
    font-size: 8px;
    font-weight: 400;
}

.nav-link {
    padding: 0.25rem 0.5rem;
}

.nav-link img{
    filter: contrast(0%);
}

.nav-link.active img{
    filter: contrast(100%);
}

#card-ref-1 .card-body {
    background-color: var(--semantic-negative-100);
    color: var(--semantic-negative-600);
}

#card-ref-2 .card-body {
    background-color: var(--semantic-warning-100);
    color: var(--semantic-warning-400);
}

#card-ref-3 .card-body {
    background-color: var(--semantic-positive-100);
    color: var(--semantic-positive-600);
}

#card-ref-1 p {
    color: inherit;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
}

#card-ref-2 p {
    color: inherit;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
}

#card-ref-3 p {
    color: inherit;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
}

#card-ref-1 p:first-child {
    margin-top: 0;
}

#card-ref-2 p:first-child {
    margin-top: 0;
}

#card-ref-3 p:first-child {
    margin-top: 0;
}

#card-ref-1 b {
    color: #DC3545;
    font-size: 1.2rem;
}

#card-ref-2 b {
    color: #EEAB00;
    font-size: 1.2rem;
}

#card-ref-3 b {
    color: #28A745;
    font-size: 1.2rem;
}

.info-label {
    display: inline-block;
    width: 150px; /* Adjust width as needed */
}
#info-value {
    margin-left: 10px;
}

.vr {
    border-left: 3px solid;
    height: 15px;
    align-self: center;
}

.hstack {
    justify-content: space-evenly;
}

.reference-left-col, .reference-right-col {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex: auto;
}

.reference-right-col {
    margin-left: 1rem;
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

li {
    margin-bottom: .5rem;
}

li:last-child {
    margin-bottom: 0;
}

.sensor-parameter-list {
    width: 130px;
}

.infos-card-body {
    background-color: #EDF0F5;
}

.sensor-card p {
    margin-bottom: .25rem;
}

.fs-4 {
    color: #5533A4;
    font-weight: 500;
}

.modal-data-saved {
    justify-content: center;

}

.modal-data-saved>.modal-content {
    width: 200px;
    height: 200px;
    background-color: white;
}

.modal-data-saved>.modal-content>.modal-body {
    align-items: center;
    justify-content: center;
    display: flex;
}

.infos-card-body>.row>.col>.row:nth-child(2){
    height: 40px;
}


/* .infos-body {
    background-color: #EDF0F5 !important;
    background-clip: content-box;
} */

/* New 16:9 panel (1280x720 and up). The older 800x480 displays never match this
   query, so their layout is untouched. Kept at the end of the file so it wins over
   the base rules above (same specificity, later wins). */
@media (min-width: 1024px) {
    /* Every page: keep content at a compact width (the 1280px cap, and the settings
       page's 95%/1300px, stretched the layout on the 16:9 panel). The Restart button
       stays fixed top-right of the viewport, outside the capped column. */
    .container-fluid#page-container,
    .container-fluid#page-container:has(.settings-page) {
        max-width: 960px;
    }

    /* Dashboard only: also center it vertically instead of top-aligning.
       .vstack defaults to flex: 1 1 auto, so stop it from filling the height. */
    .container-fluid#page-container:has(#dashboard-container) {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .container-fluid#page-container:has(#dashboard-container) > #dashboard-container {
        flex: 0 0 auto;
    }
}

/* NBM row: keep the three cards (red/yellow/green) on one line whenever
   Bootstrap's md layout applies. Three 33.33% columns plus gutters can round to
   just over 100% and wrap the last (green) card down; long nowrap values could
   also widen a column. Never wrap, and let columns shrink below content width. */
@media (min-width: 768px) {
    #row-reference-values {
        flex-wrap: nowrap;
    }

    #row-reference-values > .col-md-4 {
        min-width: 0;
    }

    .nbm-col {
        min-width: 0;
    }
}