body{
margin:0;
background:#1f1f1f;
font-family:Arial;
color:#eee;
min-height:100vh;
display:flex;
flex-direction:column;
}

.site-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:10px 14px;
background:#111;
border-bottom:1px solid #2f2f2f;
position:sticky;
top:0;
z-index:1000;
}

.header-left,
.header-center,
.header-right{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.header-left{
justify-content:flex-start;
flex:1 1 0;
}

.header-center{
justify-content:center;
flex:0 1 auto;
}

.header-right{
justify-content:flex-end;
flex:1 1 0;
}

.nav-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 16px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
color:#00bfff;
text-decoration:none;
font-size:16px;
line-height:1;
cursor:pointer;
transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
box-sizing:border-box;
white-space:nowrap;
}

.nav-btn:hover{
background:#2f2f2f;
border-color:#555;
}

.nav-btn:active{
background:#1e1e1e;
}

.nav-btn-active{
background:#1d2b36;
border-color:#00bfff;
color:#7fdfff;
}

.action-btn{
min-width:150px;
font-weight:700;
}

.time-btn{
min-width:82px;
cursor:default;
color:#ddd;
}

.status-box{
display:flex;
align-items:center;
justify-content:center;
height:42px;
min-width:520px;
max-width:100%;
padding:0 16px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
font-size:16px;
white-space:pre;
box-sizing:border-box;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
}

.online{
color:#32CD32;
}

.offline{
color:#f44336;
}

.btn{
background:#252525;
border:1px solid #3d3d3d;
padding:10px 14px;
color:#00bfff;
border-radius:6px;
cursor:pointer;
font-size:18px;
min-width:150px;
transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover{
background:#2f2f2f;
border-color:#555;
}

.btn:active{
background:#1e1e1e;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;
padding:15px;
flex:0 0 auto;
align-content:start;
align-items:stretch;
}

.card{
background:#2b2b2b;
border-radius:8px;
padding:10px;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
height:100%;
box-sizing:border-box;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(15,15,15,0.8);
display:none;
pointer-events:none;
border-radius:8px;
z-index:10;
}

.card.grey .overlay{
display:block;
}

.title{
font-size:17px;
color:#aaa;
margin-bottom:5px;
text-align:center;
}

.value{
font-size:22px;
color:#9acd32;
text-align:center;
}

.gauge-wrap{
position:relative;
width:200px;
height:200px;
z-index:1;
}

canvas{
display:block;
margin:0 auto;
}

canvas[id^="g"]{
width:200px;
height:200px;
}

.value-row{
position:absolute;
bottom:50px;
left:0;
right:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 12px;
z-index:1;
}

.value-inside{
position:absolute;
bottom:50px;
left:0;
right:0;
text-align:center;
font-size:22px;
color:#9acd32;
z-index:1;
}

.value-inside-left{
position:static;
text-align:left;
font-size:22px;
color:#9acd32;
}

.setpoint-inside{
position:static;
text-align:right;
font-size:18px;
color:#ffcc00;
white-space:nowrap;
}

.spark-wrap{
position:absolute;
bottom:5px;
left:0;
right:0;
display:flex;
align-items:center;
gap:6px;
padding:0 5px;
}

.spark{
height:40px;
width:100%;
}

.spark-scale{
font-size:10px;
color:#aaa;
display:flex;
flex-direction:column;
justify-content:space-between;
height:40px;
min-width:32px;
text-align:right;
}

.site-footer{
flex-shrink:0;
padding:12px 10px 14px 10px;
background:#111;
border-top:1px solid #2f2f2f;
text-align:center;
}

.footer-text{
color:#888;
font-size:15px;
line-height:1.2;
}

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-box{
background:#2b2b2b;
padding:20px;
border-radius:8px;
text-align:center;
position:relative;
z-index:10000;
}

.popup button{
margin:5px;
}

.stale-text{
color:#454545 !important;
}

.alarm-history-card{
align-items:center;
justify-content:flex-start;
min-height:88px;
transition:min-height 0.2s ease;
}

.alarm-history-card.expanded{
min-height:320px;
}

.alarm-history-btn{
margin-top:4px;
margin-bottom:2px;
}

.btn-set{
margin-top:20px;
margin-bottom:0;
}

.alarm-history-body{
display:none;
flex-direction:column;
align-items:center;
width:100%;
margin-top:4px;
}

.alarm-history-label{
font-size:16px;
color:#ddd;
text-align:center;
margin-top:6px;
margin-bottom:6px;
}

.alarm-history-field{
width:100%;
box-sizing:border-box;
min-height:42px;
background:#3a3a3a;
border:1px solid #666;
border-radius:6px;
padding:8px 10px;
font-size:16px;
line-height:1.2;
color:#eee;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
word-break:break-word;
}

.alarm-history-field-large{
min-height:77px;
align-items:flex-start;
padding-top:8px;
}

.case-card{
justify-content:flex-start;
}

.case-main-value{
font-size:22px;
margin-top:4px;
margin-bottom:10px;
line-height:1.15;
word-break:break-word;
}

.case-subtitle{
font-size:17px;
color:#ddd;
text-align:center;
margin-top:2px;
margin-bottom:8px;
}

.case-sub-value{
font-size:22px;
line-height:1.15;
margin-bottom:10px;
word-break:break-word;
}

.power-info-card{
justify-content:flex-start;
}

.power-info-label{
font-size:17px;
color:#ddd;
text-align:center;
margin-top:4px;
margin-bottom:8px;
line-height:1.15;
}

.power-info-value{
font-size:22px;
line-height:1.15;
margin-bottom:14px;
word-break:break-word;
}

@media (max-width: 1400px){
.status-box{
min-width:420px;
}
}

@media (max-width: 1200px){
.site-header{
flex-direction:column;
align-items:center;
gap:8px;
padding:8px 10px;
position:static;
}

.header-left,
.header-center,
.header-right{
width:100%;
justify-content:center;
gap:8px;
}

.status-box{
min-width:320px;
margin:0 auto;
height:40px;
font-size:15px;
padding:0 12px;
}

.nav-btn{
height:40px;
font-size:15px;
padding:0 12px;
}

.action-btn{
min-width:130px;
}

.time-btn{
min-width:74px;
}
}

/* Мобильный вертикальный режим: минимум 2 карточки в ряд */
@media (max-width: 768px) and (orientation: portrait){
.grid{
grid-template-columns:repeat(2,minmax(0,1fr)); /* на телефоне вертикально минимум 2 карточки в ряд */
gap:8px;
padding:8px;
}

.card{
padding:6px;
border-radius:7px;
}

.title{
font-size:14px;
margin-bottom:3px;
}

.gauge-wrap{
width:150px;   /* уменьшенный размер стрелочного индикатора для мобильного вертикального режима */
height:150px;  /* уменьшенный размер стрелочного индикатора для мобильного вертикального режима */
}

canvas[id^="g"]{
width:150px;   /* уменьшенный размер canvas индикатора для мобильного вертикального режима */
height:150px;  /* уменьшенный размер canvas индикатора для мобильного вертикального режима */
}

.value-row{
bottom:34px;
padding:0 8px;
}

.value-inside{
bottom:34px;
font-size:17px;
}

.value-inside-left{
font-size:17px;
}

.setpoint-inside{
font-size:14px;
}

.spark-wrap{
bottom:4px;
gap:4px;
padding:0 4px;
}

.spark{
height:28px;
}

.spark-scale{
height:28px;
min-width:24px;
font-size:8px;
}

.value{
font-size:18px;
}

.case-main-value,
.case-sub-value,
.power-info-value{
font-size:18px;
}

.case-subtitle,
.power-info-label{
font-size:14px;
}

.alarm-history-label{
font-size:14px;
}

.alarm-history-field{
font-size:14px;
min-height:36px;
padding:6px 8px;
}

.alarm-history-field-large{
min-height:62px;
}

.btn{
min-width:110px;
font-size:14px;
padding:8px 10px;
}

.btn-set{
margin-top:12px;
}
}

/* Мобильный горизонтальный режим: минимум 4 карточки в ряд.
   Важно: блок ограничен сенсорными устройствами.
   На ПК при сужении окна браузера обычный landscape-медиа-запрос тоже срабатывал
   и резко уменьшал индикаторы до 86px. */
@media (max-width: 950px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
.grid{
grid-template-columns:repeat(4,minmax(0,1fr)); /* на телефоне горизонтально минимум 4 карточки в ряд */
gap:6px;
padding:6px;
}

.card{
padding:5px;
border-radius:6px;
}

.title{
font-size:12px;
margin-bottom:2px;
}

.gauge-wrap{
width:112px;   /* устойчивый размер индикатора для мобильного горизонтального режима */
height:112px;  /* не даём карточке резко схлопываться по высоте */
}

canvas[id^="g"]{
width:112px;   /* устойчивый размер canvas индикатора для мобильного горизонтального режима */
height:112px;  /* не даём canvas уменьшаться до 86px */
}

.value-row{
bottom:27px;
padding:0 5px;
}

.value-inside{
bottom:27px;
font-size:15px;
}

.value-inside-left{
font-size:15px;
}

.setpoint-inside{
font-size:12px;
}

.spark-wrap{
bottom:3px;
gap:3px;
padding:0 3px;
}

.spark{
height:22px;
}

.spark-scale{
height:22px;
min-width:20px;
font-size:7px;
}

.value{
font-size:16px;
}

.case-main-value,
.case-sub-value,
.power-info-value{
font-size:15px;
margin-bottom:7px;
}

.case-subtitle,
.power-info-label{
font-size:12px;
margin-bottom:5px;
}

.alarm-history-label{
font-size:12px;
margin-top:4px;
margin-bottom:4px;
}

.alarm-history-field{
font-size:12px;
min-height:28px;
padding:5px 6px;
border-radius:5px;
}

.alarm-history-field-large{
min-height:46px;
}

.alarm-history-card{
min-height:76px;
}

.alarm-history-card.expanded{
min-height:220px;
}

.btn{
min-width:82px;
font-size:12px;
padding:6px 7px;
}

.btn-set{
margin-top:10px;
}

.case-main-value{
margin-top:2px;
}

.power-info-label{
margin-top:3px;
}
}

@media (max-width: 700px){
.site-header{
gap:6px;
padding:6px 8px;
position:static;
}

.header-left,
.header-center,
.header-right{
gap:6px;
}

.nav-btn{
font-size:14px;
padding:0 10px;
height:36px;
border-radius:7px;
}

.action-btn{
min-width:118px;
}

.time-btn{
min-width:64px;
}

.status-box{
font-size:14px;
height:36px;
min-width:0;
width:auto;
max-width:100%;
padding:0 10px;
border-radius:7px;
}

.site-footer{
padding:10px 8px 12px 8px;
}

.footer-text{
font-size:14px;
}
}

@media (max-width: 420px) and (orientation: portrait){
.grid{
gap:6px;
padding:6px;
}

.card{
padding:5px;
}

.gauge-wrap{
width:136px;   /* дополнительное уменьшение индикатора для очень узких экранов в вертикальном режиме */
height:136px;  /* дополнительное уменьшение индикатора для очень узких экранов в вертикальном режиме */
}

canvas[id^="g"]{
width:136px;   /* дополнительное уменьшение canvas для очень узких экранов в вертикальном режиме */
height:136px;  /* дополнительное уменьшение canvas для очень узких экранов в вертикальном режиме */
}

.value-row{
bottom:30px;
padding:0 6px;
}

.value-inside{
bottom:30px;
font-size:16px;
}

.value-inside-left{
font-size:16px;
}

.setpoint-inside{
font-size:13px;
}

.title{
font-size:13px;
}

.spark{
height:24px;
}

.spark-scale{
height:24px;
min-width:22px;
font-size:7px;
}

.case-main-value,
.case-sub-value,
.power-info-value{
font-size:16px;
}

.case-subtitle,
.power-info-label,
.alarm-history-label,
.alarm-history-field{
font-size:13px;
}
}


/* =========================================================
   RESPONSIVE HEADER FIX
   Назначение:
   - не давать верхнему кнопочному блоку выходить за пределы экрана;
   - принудительно переносить кнопки на новые строки на узких экранах;
   - перекрывать локальные inline-стили страниц через !important.
   ========================================================= */

.site-header{
max-width:100vw;
box-sizing:border-box;
overflow-x:hidden;
}

.header-left,
.header-center,
.header-right{
min-width:0;
box-sizing:border-box;
}

.site-header .nav-btn,
.site-header .status-box,
.site-header .user-box,
.site-header button{
max-width:100%;
box-sizing:border-box;
}

@media (max-width: 1200px){
.site-header{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
flex-wrap:wrap !important;
gap:8px !important;
width:100% !important;
max-width:100vw !important;
overflow-x:hidden !important;
padding-left:8px !important;
padding-right:8px !important;
position:static !important;
}

.header-left,
.header-center,
.header-right{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:8px !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:0 1 auto !important;
box-sizing:border-box !important;
}

.site-header .nav-btn,
.site-header button.nav-btn,
.site-header .status-box,
.site-header .user-box{
flex:0 1 auto !important;
white-space:nowrap !important;
max-width:100% !important;
box-sizing:border-box !important;
}
}

@media (max-width: 700px){
.site-header{
gap:6px !important;
padding:6px !important;
overflow-x:hidden !important;
}

.header-left,
.header-center,
.header-right{
gap:6px !important;
justify-content:center !important;
}

.site-header .nav-btn,
.site-header button.nav-btn{
height:36px !important;
min-width:0 !important;
max-width:calc(50vw - 12px) !important;
padding:0 8px !important;
font-size:13px !important;
border-radius:7px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

.site-header .action-btn{
min-width:0 !important;
}

.site-header .time-btn{
min-width:62px !important;
max-width:90px !important;
}

.site-header .status-box,
.site-header .user-box{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:auto !important;
min-height:36px !important;
padding:7px 8px !important;
font-size:13px !important;
line-height:1.2 !important;
white-space:normal !important;
word-break:break-word !important;
overflow:hidden !important;
text-overflow:clip !important;
}
}

@media (max-width: 420px){
.site-header .nav-btn,
.site-header button.nav-btn{
max-width:calc(50vw - 10px) !important;
padding:0 6px !important;
font-size:12px !important;
}

.header-left,
.header-center,
.header-right{
gap:5px !important;
}
}

@media (max-width: 340px){
.site-header .nav-btn,
.site-header button.nav-btn{
max-width:100% !important;
width:100% !important;
}
}


/* =========================================================
   TOUCH MOBILE LANDSCAPE: CLIENT ACCESS CARD FIX
   Назначение:
   - карточка "Доступ" не должна сжимать подписи и даты в одну узкую строку;
   - применяется только на сенсорных устройствах в горизонтальной ориентации;
   - !important нужен, потому что часть стилей карточки задана внутри страниц после подключения dash.css.
   ========================================================= */
@media (max-width: 950px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
.client-access-card{
grid-column:span 2 !important;
min-width:0 !important;
}

.client-access-card .title,
.client-access-title{
font-size:14px !important;
margin-bottom:5px !important;
}

.client-access-grid{
gap:4px !important;
margin-top:6px !important;
}

.client-access-row{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:3px !important;
padding:5px 0 !important;
min-width:0 !important;
}

.client-access-label{
font-size:13px !important;
line-height:1.15 !important;
max-width:100% !important;
}

.client-access-value{
font-size:13px !important;
line-height:1.15 !important;
text-align:left !important;
max-width:100% !important;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}

.client-access-progress{
padding:6px 0 7px 0 !important;
}

.client-access-progress-top{
gap:6px !important;
margin-bottom:5px !important;
}

.client-access-progress-title,
.client-access-progress-percent{
font-size:13px !important;
line-height:1.15 !important;
}

.client-access-progress-track{
height:14px !important;
}

.client-access-progress-meta{
margin-top:5px !important;
font-size:12px !important;
line-height:1.2 !important;
}

.client-access-badge{
min-height:24px !important;
padding:3px 8px !important;
font-size:12px !important;
white-space:normal !important;
text-align:center !important;
}
}

@media (max-width: 720px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
.client-access-card{
grid-column:span 2 !important;
}
}

/* =========================================================
   #233 MOBILE LANDSCAPE: CLIENT ACCESS CARD HARD FIX
   Назначение:
   - реальный телефон в горизонтальной ориентации может не совпадать с hover/pointer media query;
   - поэтому используем ограничение по высоте окна, а не только по типу указателя;
   - карточка "Доступ" получает больше ширины и внутреннюю вертикальную раскладку строк.
   ========================================================= */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
.client-access-card{
grid-column:span 2 !important;
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}

.client-access-card .overlay{
border-radius:inherit !important;
}

.client-access-card .title,
.client-access-card .client-access-title{
font-size:15px !important;
line-height:1.15 !important;
margin-bottom:5px !important;
}

.client-access-card .client-access-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:4px !important;
margin-top:6px !important;
min-width:0 !important;
max-width:100% !important;
}

.client-access-card .client-access-row{
display:grid !important;
grid-template-columns:1fr !important;
align-items:start !important;
justify-content:start !important;
gap:3px !important;
padding:5px 0 !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-label,
.client-access-card .client-access-value{
display:block !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
}

.client-access-card .client-access-label{
font-size:13px !important;
line-height:1.15 !important;
color:#c8d2dc !important;
}

.client-access-card .client-access-value{
font-size:13px !important;
line-height:1.18 !important;
font-weight:700 !important;
}

.client-access-card .client-access-progress{
padding:6px 0 7px 0 !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-progress-top{
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
gap:8px !important;
margin-bottom:5px !important;
min-width:0 !important;
max-width:100% !important;
}

.client-access-card .client-access-progress-title,
.client-access-card .client-access-progress-percent{
font-size:13px !important;
line-height:1.15 !important;
white-space:normal !important;
}

.client-access-card .client-access-progress-percent{
text-align:right !important;
}

.client-access-card .client-access-progress-track{
height:14px !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-progress-meta{
margin-top:5px !important;
font-size:12px !important;
line-height:1.2 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
}

.client-access-card .client-access-badge{
display:inline-flex !important;
max-width:100% !important;
min-height:24px !important;
padding:3px 8px !important;
font-size:12px !important;
line-height:1.15 !important;
white-space:normal !important;
text-align:center !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
}
}



/* =========================================================
   #234 MOBILE LANDSCAPE: CLIENT ACCESS CARD WIDTH CORRECTION
   Не растягиваем карточку "Доступ" на всю строку.
   Контент остаётся вертикальным внутри строк, но сама карточка занимает 2 колонки.
   ========================================================= */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
.client-access-card{
grid-column:span 2 !important;
justify-self:stretch !important;
width:auto !important;
}
}

/* =========================================================
   #235 MOBILE LANDSCAPE: CLIENT ACCESS CONTENT WIDTH FIX
   Причина:
   - .card имеет align-items:center;
   - .client-access-grid без width:100% сжимается по содержимому;
   - карточка "Доступ" широкая, но внутренний контент остаётся компактным.
   Решение:
   - растягиваем именно внутренний контент карточки на всю доступную ширину;
   - ширину самой карточки не увеличиваем.
   ========================================================= */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
.client-access-card{
align-items:stretch !important;
}

.client-access-card .client-access-grid,
.client-access-card .client-access-progress,
.client-access-card .client-access-progress-track,
.client-access-card .client-access-note,
.client-access-card .client-access-warning{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-row{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-label,
.client-access-card .client-access-value{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
}

/* =========================================================
   #236 MOBILE LANDSCAPE: CLIENT ACCESS BACK TO ONE GRID CELL
   Решение:
   - карточка "Доступ" возвращена в одну колонку сетки;
   - текст внутри карточки немного уменьшен;
   - содержимое центрируется и переносится внутри карточки;
   - предыдущие span 2 / растяжения перекрываются ниже по каскаду.
   ========================================================= */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
.client-access-card{
grid-column:auto !important;
justify-self:stretch !important;
align-items:center !important;
width:auto !important;
min-width:0 !important;
max-width:100% !important;
padding:7px 6px !important;
box-sizing:border-box !important;
}

.client-access-card .title,
.client-access-card .client-access-title{
font-size:13px !important;
line-height:1.1 !important;
margin-bottom:5px !important;
text-align:center !important;
}

.client-access-card .client-access-grid{
width:100% !important;
max-width:100% !important;
margin-top:5px !important;
gap:0 !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-row{
display:block !important;
width:100% !important;
max-width:100% !important;
padding:5px 0 !important;
min-height:0 !important;
box-sizing:border-box !important;
text-align:center !important;
}

.client-access-card .client-access-label,
.client-access-card .client-access-value{
display:block !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
text-align:center !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}

.client-access-card .client-access-label{
font-size:11px !important;
line-height:1.12 !important;
margin-bottom:2px !important;
}

.client-access-card .client-access-value{
font-size:12px !important;
line-height:1.14 !important;
font-weight:700 !important;
}

.client-access-card .client-access-progress{
width:100% !important;
max-width:100% !important;
padding:5px 0 6px 0 !important;
box-sizing:border-box !important;
text-align:center !important;
}

.client-access-card .client-access-progress-top{
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
gap:5px !important;
margin-bottom:4px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-progress-title,
.client-access-card .client-access-progress-percent{
font-size:11px !important;
line-height:1.12 !important;
white-space:normal !important;
}

.client-access-card .client-access-progress-title{
text-align:left !important;
}

.client-access-card .client-access-progress-percent{
text-align:right !important;
font-weight:700 !important;
}

.client-access-card .client-access-progress-track{
width:100% !important;
max-width:100% !important;
height:11px !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-progress-meta{
width:100% !important;
max-width:100% !important;
margin-top:4px !important;
font-size:10px !important;
line-height:1.15 !important;
text-align:center !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
box-sizing:border-box !important;
}

.client-access-card .client-access-badge{
display:inline-flex !important;
max-width:100% !important;
min-height:21px !important;
padding:2px 6px !important;
font-size:10px !important;
line-height:1.1 !important;
white-space:normal !important;
text-align:center !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}

.client-access-card .client-access-note,
.client-access-card .client-access-warning{
width:100% !important;
max-width:100% !important;
font-size:10px !important;
line-height:1.15 !important;
text-align:center !important;
box-sizing:border-box !important;
}
}


/* =========================================================
   #242 MOBILE LANDSCAPE HEADER: TWO ROWS, GROUPED CENTER
   Ряд 1: основные переходы сгруппированы и центрированы.
   Ряд 2: ГРУППА / ОБНОВИТЬ / статус / часы / ВЫХОД.
   Только для низкой горизонтальной ориентации.
   ========================================================= */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
.site-header{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:center !important;
gap:6px 8px !important;
padding:6px 8px !important;
width:100% !important;
max-width:100vw !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
position:static !important;
}

.site-header::before{
content:"" !important;
order:2 !important;
flex:0 0 100% !important;
width:100% !important;
height:0 !important;
padding:0 !important;
margin:0 !important;
}

.site-header .header-left,
.site-header .header-right{
display:contents !important;
}

.site-header .nav-btn,
.site-header button.nav-btn,
.site-header .status-box{
height:36px !important;
min-height:36px !important;
padding-left:9px !important;
padding-right:9px !important;
font-size:13px !important;
line-height:1 !important;
border-radius:8px !important;
box-sizing:border-box !important;
white-space:nowrap !important;
min-width:0 !important;
max-width:100% !important;
}

.site-header .header-left > a.nav-btn:nth-of-type(1),
.site-header .header-left > a.nav-btn:nth-of-type(2),
.site-header .header-left > a.nav-btn:nth-of-type(3),
.site-header .header-left > a.nav-btn:nth-of-type(4),
.site-header .header-left > a.nav-btn:nth-of-type(5){
order:1 !important;
flex:0 0 auto !important;
}

.site-header #deviceGroupWrap,
.site-header .header-left > button.action-btn,
.site-header #statusBlock.status-box,
.site-header #clockBlock.time-btn,
.site-header .header-right > a.nav-btn{
order:3 !important;
flex:0 0 auto !important;
}

.site-header .header-left > button.action-btn{
min-width:112px !important;
font-weight:700 !important;
}

.site-header #statusBlock.status-box{
display:flex !important;
width:auto !important;
min-width:300px !important;
max-width:calc(100vw - 420px) !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:13px !important;
line-height:1.15 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

.site-header #clockBlock.time-btn{
min-width:70px !important;
max-width:78px !important;
}

.site-header .header-right > a.nav-btn[href*="admin"]{
order:3 !important;
}

.site-header .header-right > a.nav-btn[href*="logout"]{
order:3 !important;
}

.device-group-menu{
top:48px !important;
}
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 760px){
.site-header{
gap:5px 6px !important;
padding:5px 6px !important;
}

.site-header .nav-btn,
.site-header button.nav-btn,
.site-header .status-box{
height:34px !important;
min-height:34px !important;
padding-left:7px !important;
padding-right:7px !important;
font-size:12px !important;
border-radius:7px !important;
}

.site-header .header-left > button.action-btn{
min-width:96px !important;
}

.site-header #statusBlock.status-box{
min-width:240px !important;
max-width:calc(100vw - 360px) !important;
font-size:12px !important;
padding-left:8px !important;
padding-right:8px !important;
}

.site-header #clockBlock.time-btn{
min-width:62px !important;
max-width:70px !important;
}
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 650px){
.site-header #statusBlock.status-box{
flex:1 1 100% !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
order:4 !important;
}
}

/* =========================================================
   #243 PC/TABLET TRANSITION HEADER CENTERING
   Назначение:
   - в промежуточном ПК-размере, когда шапка естественно собирается в 2 строки,
     не оставлять вторую строку прижатой вправо;
   - первая строка с основными кнопками остаётся сгруппированной по центру;
   - вторая строка: статус / часы / выход центрируется.
   ========================================================= */
@media (min-width: 1201px) and (max-width: 1500px){
.site-header{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:center !important;
gap:8px 10px !important;
width:100% !important;
max-width:100vw !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
position:static !important;
top:auto !important;
}

.site-header .header-left{
display:flex !important;
flex:0 1 auto !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
margin-left:auto !important;
margin-right:auto !important;
justify-content:center !important;
align-items:center !important;
flex-wrap:nowrap !important;
box-sizing:border-box !important;
}

.site-header .header-right{
display:flex !important;
flex:0 0 100% !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin-left:0 !important;
margin-right:0 !important;
justify-content:center !important;
align-items:center !important;
flex-wrap:nowrap !important;
box-sizing:border-box !important;
}

.site-header #statusBlock.status-box{
flex:0 1 auto !important;
width:auto !important;
min-width:360px !important;
max-width:620px !important;
justify-content:center !important;
text-align:center !important;
}

.site-header #clockBlock.time-btn{
flex:0 0 auto !important;
}

.site-header .header-right > a.nav-btn{
flex:0 0 auto !important;
}
}

/* =========================================================
   #245 PC TWO-ROW HEADER CENTER FIX
   Назначение:
   - исправить промежуточный ПК-размер, где шапка уже разбивается на 2 строки,
     но вторая строка разъезжается вправо;
   - не трогать мобильный landscape, где работает отдельный блок #242;
   - обе строки держать как компактные группы по центру.
   ========================================================= */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-width: 1500px){
.site-header{
display:flex !important;
flex-direction:column !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
width:100% !important;
max-width:100vw !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
position:static !important;
top:auto !important;
}

.site-header .header-left,
.site-header .header-right{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
flex:0 1 auto !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}

.site-header .nav-btn,
.site-header button.nav-btn,
.site-header .status-box{
flex:0 0 auto !important;
white-space:nowrap !important;
box-sizing:border-box !important;
}

.site-header #statusBlock.status-box{
display:inline-flex !important;
flex:0 1 auto !important;
width:auto !important;
min-width:340px !important;
max-width:560px !important;
justify-content:center !important;
text-align:center !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

.site-header #clockBlock.time-btn{
flex:0 0 auto !important;
min-width:74px !important;
}

.site-header .header-right > a.nav-btn{
flex:0 0 auto !important;
}
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-width: 1180px){
.site-header .header-left,
.site-header .header-right{
gap:7px !important;
}

.site-header .nav-btn,
.site-header button.nav-btn,
.site-header .status-box{
height:38px !important;
min-height:38px !important;
padding-left:10px !important;
padding-right:10px !important;
font-size:14px !important;
}

.site-header #statusBlock.status-box{
min-width:300px !important;
max-width:480px !important;
font-size:14px !important;
}

.site-header .action-btn{
min-width:120px !important;
}

.site-header #clockBlock.time-btn{
min-width:68px !important;
}
}

/* =========================================================
   #248 TOUCH2M HEALTH DOTS
   Назначение:
   - маленький индикатор жизни страницы / web API / свежести данных на d1-d6;
   - зелёный: web отвечает и данные свежие;
   - жёлтый: web отвечает, но устройство в таймауте;
   - красный: server_ping/web API не отвечает;
   - мигание выполняется JS-пульсом, чтобы остановка JS была заметна.
   ========================================================= */
.touch2m-health-page .card.gauge-open-card .title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    box-sizing:border-box;
}

.touch2m-health-page .gauge-title-text{
    display:inline-block;
    min-width:0;
}

.touch2m-health-page .health-dot{
    display:inline-block;
    flex:0 0 auto;
    width:10px;
    height:10px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.28);
    background:#ffcc00;
    box-shadow:0 0 8px rgba(255,204,0,0.55);
    opacity:1;
    transition:opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-sizing:border-box;
}

.touch2m-health-page .health-dot.health-dot-pulse-off{
    opacity:0.22;
}

.touch2m-health-page .health-dot.health-dot-ok{
    background:#32CD32;
    border-color:rgba(50,205,50,0.85);
    box-shadow:0 0 8px rgba(50,205,50,0.70);
}

.touch2m-health-page .health-dot.health-dot-warn{
    background:#ffcc00;
    border-color:rgba(255,204,0,0.85);
    box-shadow:0 0 8px rgba(255,204,0,0.70);
}

.touch2m-health-page .health-dot.health-dot-fail{
    background:#f44336;
    border-color:rgba(244,67,54,0.90);
    box-shadow:0 0 9px rgba(244,67,54,0.78);
}

.touch2m-health-page .status-box.server-fail{
    color:#f44336;
    border-color:#7a2d2d;
    background:#3a1f1f;
}

.touch2m-health-page .status-box.offline{
    color:#ffcc00;
}

.touch2m-health-page .gauge-fullscreen-title-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    min-width:0;
}

.touch2m-health-page .health-dot-fullscreen{
    width:12px;
    height:12px;
}

@media (max-width: 768px) and (orientation: portrait){
    .touch2m-health-page .health-dot{
        width:9px;
        height:9px;
    }

    .touch2m-health-page .health-dot-fullscreen{
        width:11px;
        height:11px;
    }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 1300px){
    .touch2m-health-page .card.gauge-open-card .title{
        gap:5px;
    }

    .touch2m-health-page .health-dot{
        width:8px;
        height:8px;
        box-shadow:0 0 6px rgba(255,204,0,0.55);
    }

    .touch2m-health-page .health-dot.health-dot-ok{
        box-shadow:0 0 6px rgba(50,205,50,0.62);
    }

    .touch2m-health-page .health-dot.health-dot-fail{
        box-shadow:0 0 7px rgba(244,67,54,0.70);
    }
}