:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#4f46e5;
  --accent2:#16a34a;
  --danger:#dc2626;
  --shadow:0 8px 30px rgba(17,24,39,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;height:100%}
body{overflow-x:hidden;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:5px 16px 5px 20px;
}

/* APP: obsah stránok v APP má byť rovnako široký ako v APP Zákazníci */
.app-main > .container{
  max-width:1200px;
}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(246,247,251,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(17,24,39,.08);
}
.trial-banner{
  /* Banner musí byť zarovnaný so šírkou APP obsahu (1200px) */
  max-width:1200px;
  width:100%;
  margin:10px auto 0 auto;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(79,70,229,.25);
  background:rgba(79,70,229,.08);
  color:var(--text);
  font-weight:600;
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--accent)}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:10px 10px;border-radius:12px;color:var(--text)}
.nav a:hover{background:rgba(79,70,229,.08);text-decoration:none}
.lang{display:flex;gap:8px}
.lang a{padding:8px 10px;border-radius:12px;border:1px solid rgba(17,24,39,.10);color:var(--muted)}
.lang a.active{border-color:rgba(79,70,229,.35);color:var(--accent)}
.section{
  padding:0;
}
.section.app-main{
  padding-top:3px;
}
.section.pastel1{background:linear-gradient(180deg, rgba(79,70,229,.08), rgba(79,70,229,0))}
.section.pastel2{background:linear-gradient(180deg, rgba(22,163,74,.08), rgba(22,163,74,0))}
.section.pastel3{background:linear-gradient(180deg, rgba(236,72,153,.08), rgba(236,72,153,0))}
.section.pastel4{background:linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,0))}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-start}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(17,24,39,.06);
  padding:12px;
}
.card h2,.card h3{margin:0 0 10px 0}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:14px;border:1px solid rgba(17,24,39,.10);
  background:#fff;color:var(--text);cursor:pointer;font-weight:600;
}
.btn.primary{background:var(--accent);border-color:rgba(79,70,229,.5);color:#fff}
.btn.danger{background:var(--danger);border-color:rgba(220,38,38,.6);color:#fff}
.btn.rev{background:var(--accent);border-color:rgba(79,70,229,.5);color:#fff}
.btn.ctrl{background:var(--accent2);border-color:rgba(22,163,74,.6);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}
.input, select, textarea{
  width:100%;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  outline:none;
}

/* Readonly inputs used in APP modes (Kontrola) */
.input[readonly],
.input.readonly{
  opacity:.70;
  background:#f3f3f3;
}
.input:focus, select:focus, textarea:focus{border-color:rgba(79,70,229,.5);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.form-row{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.col-12{grid-column:span 12}
.col-2{grid-column:span 2}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.rpe-inline-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rpe-inline-col{min-width:0}

/* Mobile menu (shared for web, app, admin) */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
  cursor:pointer;
  padding:10px;
}
.menu-toggle span{
  display:block;
  height:2px;
  background:var(--text);
  border-radius:2px;
  margin:5px 0;
}
.top-actions{display:flex;gap:8px;align-items:center}
.nav-actions{display:flex;gap:8px;align-items:center}

@media (max-width: 820px){
  .container{padding:10px}
  .section{padding:14px 0}
  .grid{grid-template-columns:1fr;gap:10px}
  .form-row{grid-template-columns:1fr;gap:8px}
  .card{padding:10px}
  .btn{padding:7px 9px;border-radius:12px}
  .input, select, textarea{padding:7px 9px;border-radius:12px}
  .kpi .num{font-size:22px}
  .col-6,.col-4,.col-3,.col-2,.col-8,.col-9{grid-column:span 12}
  .grid > .card{grid-column:span 12 !important}
  .menu-toggle{display:inline-block}
  .top-actions{display:none}
  .nav{display:none;position:fixed;inset:64px 12px auto 12px;z-index:1000;flex-direction:column;gap:8px;padding:12px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(17,24,39,.10)}
  body.nav-open .nav{display:flex}
  .nav a{padding:12px;border-radius:12px}
  .nav-actions{flex-wrap:wrap;justify-content:flex-start}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rpe-inline-row{gap:8px}
}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .num{font-size:28px;font-weight:800}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid rgba(17,24,39,.08);text-align:left;vertical-align:top}

/* Compact, mobile friendly actions in tables */
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions-cell{min-width:220px}
.row-actions .btn{white-space:nowrap}

@media (max-width: 820px){
  .table th,.table td{padding:6px}
  .row-actions{gap:6px}
  .actions-cell{min-width:260px}
  .row-actions .btn{flex:1 1 auto}
}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid rgba(17,24,39,.12)}
.badge.ok{color:var(--accent2);border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.badge.nok{color:var(--danger);border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08)}

.badge.warn{color:#b45309;border-color:rgba(180,83,9,.35);background:rgba(180,83,9,.08)}
.badge.neutral{color:rgba(17,24,39,.65);border-color:rgba(17,24,39,.18);background:rgba(17,24,39,.06)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.editor{
  border:1px solid rgba(17,24,39,.12);
  border-radius:14px;
  background:#fff;
  padding:12px;
  min-height:160px;
}
.notice{padding:10px 12px;border-radius:14px;border:1px solid rgba(17,24,39,.10);background:rgba(79,70,229,.06)}
.notice.error{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.18)}
.notice.ok{background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.18)}

/* Workers: karta (zobraziť iba pri vytváraní alebo úprave) */
.worker-card{
  margin-top:12px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(17,24,39,.06);
  padding:12px;
}
.form-divider{
  height:1px;
  background:rgba(17,24,39,.10);
  margin:10px 0;
}
.footer{padding:26px 0;color:var(--muted);font-size:14px}


/* Device list */
.device-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.device-item{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(17,24,39,.06);
  padding:10px 12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.device-item-left{display:flex;gap:10px;align-items:flex-start;min-width:0}
.device-lines{min-width:0}
.device-lines .l1{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.device-lines .l2{font-size:14px;line-height:1.2;margin-bottom:2px}
.device-lines .l3{font-size:12px;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.device-lines .sep{margin:0 6px;color:rgba(107,114,128,.6)}
.badge-mini{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;font-weight:700;font-size:11px;
  border:1px solid rgba(17,24,39,.12);
}
.badge-mini.ok{background:rgba(22,163,74,.12);color:#0a7a28;border-color:rgba(22,163,74,.25)}
.badge-mini.nok{background:rgba(220,38,38,.10);color:#b00020;border-color:rgba(220,38,38,.22)}
.device-item-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.device-item-actions .btn{white-space:nowrap}

@media (min-width: 900px){
  .device-item{align-items:center}
  .device-lines{display:flex;align-items:center;gap:14px}
  .device-lines .l1{margin:0;min-width:64px}
  .device-lines .l2{margin:0;min-width:220px}
  .device-lines .l3{margin:0}
}


/* Devices header layout */
.devices-header { margin-top: 4px; }
.devices-header.compact .dh-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.devices-header.compact .dh-spacer{ flex:1; min-width:10px; }
.devices-header.compact .dh-sep{
  height:1px;
  background: rgba(0,0,0,.12);
  margin:6px 0;
}
.devices-header.compact .input{ padding-top:9px; padding-bottom:9px; }
.devices-header.compact .btn{ padding-top:8px; padding-bottom:8px; }
.qr-scan-box{
  margin: 8px 0 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  max-width: 520px;
}
.devices-header .dh-titlebar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.devices-header .dh-titlebar h2{ margin:0; }
.devices-header .dh-title-controls{ display:flex; align-items:center; gap:12px; flex:1; justify-content:flex-start; }
.devices-header .dh-searchbox{ display:flex; align-items:center; gap:8px; max-width:420px; flex:1; }
.devices-header .dh-searchbox .input{ width:100%; }
.btn.create{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
  font-weight:800;
  font-size:15px;
  padding:10px 14px;
  border-radius:12px;
}
.btn.create:hover{ filter:brightness(0.95); }

.btn.export{
  font-size:14px;
  padding:9px 12px;
  border-radius:12px;
}

.devices-header .dh-row{
  display:grid;
  grid-template-columns: 240px 240px 1.2fr 220px auto;
  gap:10px;
  align-items:end;
}
.devices-header .dh-cell label{ display:block; margin-bottom:6px; }
.devices-header .dh-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.devices-header .dh-export{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }

/* Responsive header */
@media (max-width: 1000px){
  .devices-header .dh-row{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:auto;
  }
  .devices-header .dh-export{ justify-content:flex-start; }
}
@media (max-width: 700px){
  .devices-header .dh-titlebar{ flex-wrap:wrap; }
  .devices-header .dh-title-controls{ width:100%; }
  .devices-header .dh-row{ grid-template-columns: 1fr; }
}

/* Device rows */
.device-list{ display:flex; flex-direction:column; gap:0; }
.device-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border-bottom:1px solid #e7e9ee;
}
.device-row:last-child{ border-bottom:none; }
.device-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.device-row-top-left{display:flex;align-items:center;gap:10px;min-width:0;}
.device-row-bottom{min-width:0;}
.status-dot{
  width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff; flex:0 0 auto;
}
.status-dot.ok{ background:#16a34a; }
.status-dot.nok{ background:#dc2626; }
.idtail{ font-weight:800; color:#111; width:52px; flex:0 0 auto; }
.device-row-text{ min-width:0; }
.device-row-text .t1 .name{ font-weight:800; font-size:14px; }
.device-row-text .t2{ font-size:12px; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.device-row-text .sep{ color:#9aa1ad; margin:0 6px; }
.device-row-actions{ display:flex; gap:10px; flex:0 0 auto; }

@media (max-width: 700px){
  .device-row-top{ align-items:flex-start; }
  .device-row-text .t2{ white-space:normal; }
  .device-row-actions{ flex-wrap:wrap; justify-content:flex-end; }
}

@media (max-width: 420px){
  .idtail{ width:auto; min-width:48px; }
  .device-row-actions{ gap:8px; }
}

/* Success button variant */
.btn.success{background:#16a34a;border-color:rgba(22,163,74,.6);color:#fff}

/* Due highlighting */
.device-row.due-soon{ background: rgba(245, 158, 11, 0.10); }
.device-row.due-expired{ background: rgba(220, 38, 38, 0.10); }
.device-row.due-soon .next{ font-weight:800; }
.device-row.due-expired .next{ font-weight:900; }


/* --- Device form: checks + statuses --- */
.form-sep{height:1px;background:#e9ecf2;margin:10px 0;}
.checks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:6px;}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:#111827;user-select:none;}
.check input[type="checkbox"]{width:16px;height:16px;}
.status-row{display:flex;align-items:center;gap:10px;margin-top:6px;min-height:30px;}
.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;line-height:1;border:1px solid transparent;}
.status-ok{background:#e7f8ed;color:#166534;border-color:#bfe7cc;}
.status-bad{background:#fdecec;color:#991b1b;border-color:#f6c2c2;}
.small{font-size:12px;}
@media (max-width:720px){
  .checks-grid{grid-template-columns:1fr;}
}



/* Templates: header layout */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hdr-left{min-width:240px}
.hdr-right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.table-wrap{overflow:auto}

/* Templates: minimalistický editor */
.tpl-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tpl-toolbar .btn{padding:6px 10px}
.tpl-toolbar-sep{width:1px;height:22px;background:rgba(17,24,39,.12);margin:0 4px}
.tpl-editor{min-height:520px}
.er-table{border-collapse:collapse;width:100%}
.er-table td,.er-table th{border:1px solid rgba(17,24,39,.18);padding:6px;vertical-align:top}
.tpl-vars-panel{margin-top:10px;padding:10px;border:1px solid rgba(17,24,39,.10);border-radius:14px;background:rgba(17,24,39,.02)}
.tpl-vars-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width: 900px){.tpl-vars-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.tpl-vars-group-title{grid-column:1/-1;font-weight:700;margin-top:6px}
.tpl-var-chip{display:block;text-align:left;border:1px solid rgba(17,24,39,.12);border-radius:12px;background:#fff;padding:8px 10px;cursor:pointer}
.tpl-var-chip:hover{background:rgba(79,70,229,.06);border-color:rgba(79,70,229,.25)}

/* Templates: toolbar variable select */
.tpl-toolbar-select{min-width:340px;height:34px;padding:6px 10px;border-radius:999px}


.norm-doc h2, .norm-doc h3 { margin: 10px 0 6px; }
.norm-doc p { margin: 6px 0; }
.norm-doc ul { margin: 6px 0 10px 18px; }

/* Nastavenia: accordion (bez horizontálneho scrollu) */
.acc{display:flex;flex-direction:column;gap:10px;}
.acc-item{border:1px solid rgba(17,24,39,.10);border-radius:16px;background:#fff;overflow:hidden;}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:rgba(17,24,39,.02);border:none;cursor:pointer;text-align:left;}
.acc-head span:first-child{font-weight:800;color:#111827;}
.acc-body{overflow-x:hidden;display:none;padding:14px;}
.acc-item.is-open .acc-body{overflow-x:hidden;display:block;}
.acc-item.is-open .acc-head{background:rgba(79,70,229,.06);}

/* Karta zariadenia: zvýraznenie povinných meraní podľa korelačnej tabuľky */
.meas-required label.muted{font-weight:700;}
.meas-required .input{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.meas-disabled{opacity:.55;}


/* Karta zariadenia – responzivita */
.radio-row{display:flex;flex-wrap:wrap;gap:14px}
.radio-row label{display:flex;align-items:center;gap:8px;flex:0 1 auto}
@media (max-width: 520px){
  .container{padding:10px}
  .grid{grid-template-columns:repeat(12, minmax(0,1fr))}
  .btn{max-width:100%}
}

/* Modal */
.modal{ position:fixed; inset:0; z-index:9999; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-card{ position:relative; margin:40px auto; background:#fff; border-radius:14px; padding:16px; width:calc(100% - 24px); box-shadow:0 20px 60px rgba(0,0,0,.25); }
@media (max-width:520px){
  .modal-card{ margin:18px auto; }
}


/* iOS focus zoom fix (Safari zoomuje pri focuse ak je font < 16px) */
input, select, textarea, button{font-size:16px;}


/* Unified APP view frame (rovnako ako Zákazníci) */
/* .view > .grid{
/*  max-width:1200;
/*  margin:0 auto;
/* }

/*
  Dôležité pre responzívnosť v CSS Grid:
  Grid položky majú predvolene min-width:auto, čo môže pri dlhých reťazcoch
  (ID, SN, názvy bez medzier) rozťahovať obsah až na šírku okna.
  V APP Zariadenia sa to prejavovalo „natiahnutím“ stránky.
*/
.view > .grid > .card{min-width:0;}

/* Explicitne zjednotiť rám pre Zariadenia a Zákazníkov (rovnaké správanie) */
/* #viewDevices > .grid{max-width:auto;margin:0 auto;}
/* #viewCustomers > .grid{max-width:auto;margin:0 auto;}

/* Lepšie lámanie dlhých textov v zozname zariadení */
.device-row-text .t1,
.device-row-text .t2{overflow-wrap:anywhere;}

/* Pager bar nad zoznamom zariadení */
.listbar{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:10px;flex-wrap:wrap}

@media (max-width: 960px){
  .app-main > .container{ max-width:100%; }
  .view > .grid{ max-width:100%; }
}


/* Editor table borders */
.editor table{
  border-collapse:collapse;
  width:100%;
}
.editor th, .editor td{
  border:1px solid #999;
  padding:6px;
  vertical-align:top;
}
@media print{ body.rvz-print-landscape{} }


/* V8.38 Devices card layout fixes */
#devicesHeaderCard{ margin-bottom: 0; }
#deviceForm .col-6,
#deviceForm .col-4,
#deviceForm .col-3,
#deviceForm .col-2,
#deviceForm .col-8,
#deviceForm .col-9{ grid-column: span 12; }
#deviceForm .form-row{ row-gap: 12px; }
#deviceForm .radio-row,
#deviceForm .checks-grid{ margin-top: 4px; }
#deviceForm .checks-grid{ max-width: 420px; }


/* V8-40 devices menu responsiveness and settings instruments */
#devicesPagerBar,
#devicesPagerBarBottom{
  justify-content:space-between;
}
#devicesPagerBar > div,
#devicesPagerBarBottom > div{
  min-width:0;
}
#devicesPagerBar .input,
#devicesPagerBarBottom .input{
  max-width:100%;
}
#devicesListCard,
#devicesHeaderCard,
#deviceFormCard{
  min-width:0;
}
#devicesList{
  min-width:0;
}
#viewSettings .acc-body .card{
  min-width:0;
}
#instrTable td,
#instrTable th,
#normLimitsTable td,
#normLimitsTable th,
#normClassTable td,
#normClassTable th,
#normRevMatrixTable td,
#normRevMatrixTable th{
  overflow-wrap:anywhere;
}
@media (max-width: 960px){
  #devicesPagerBar,
  #devicesPagerBarBottom{
    align-items:flex-start;
  }
  #devicesPagerBar > div:last-child,
  #devicesPagerBarBottom > div:last-child{
    width:100%;
    justify-content:flex-start;
  }
}
@media (max-width: 700px){
  #devicesHeaderCard .dh-row{
    align-items:stretch;
  }
  #devicesHeaderCard .dh-row > .input,
  #devicesHeaderCard .dh-row > select,
  #devicesHeaderCard .dh-row > button{
    width:100%;
    max-width:100% !important;
    min-width:0 !important;
  }
  #devicesPagerBar,
  #devicesPagerBarBottom{
    padding:8px;
  }
  #devicesPagerBar button,
  #devicesPagerBarBottom button{
    min-width:44px;
  }
  .device-label-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .device-label-controls{
    width:100%;
    align-items:stretch;
  }
  .device-label-heading{
    justify-content:flex-start;
  }
  .device-label-controls-top{
    justify-content:flex-start;
  }
  .device-label-metrics{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .device-label-subtitle{
    white-space:normal;
  }
  .device-label-frame{
    width:100%;
    max-width:280px;
  }
  .device-row-actions,
  .device-item-actions{
    width:100%;
    justify-content:flex-start;
  }
}


/* V8-41 compact devices list and search */
#devicesHeaderCard .devices-header.compact .dh-row{
  gap:8px;
  margin-bottom:6px;
}
#devicesHeaderCard .devices-header.compact .dh-sep{
  margin:6px 0;
}
#devicesHeaderCard .devices-header.compact .input,
#devicesHeaderCard .devices-header.compact select{
  min-height:38px;
  padding:8px 10px;
}
#devicesHeaderCard .devices-header.compact .btn{
  min-height:38px;
  padding:8px 12px;
}
#devicesHeaderCard .dh-help{
  margin:2px 0 0 78px;
  font-size:12px;
  line-height:1.25;
}
#devicesHeaderCard .dh-row > .muted{
  white-space:nowrap;
}
#devicesHeaderCard #devExportCsvBtn,
#devicesHeaderCard #devExportQrBtn{
  display:none !important;
}
.device-label-card{
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  padding:12px;
  background:var(--card);
}
.device-label-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.device-label-heading{
  display:flex;
  align-items:center;
  gap:6px 10px;
  flex-wrap:wrap;
  min-width:0;
}
.device-label-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.device-label-controls-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.device-label-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.device-label-actions .btn{
  min-height:34px;
  padding:6px 10px;
}
.device-label-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}
.device-label-flag input{
  margin:0;
}
.device-label-metrics{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:nowrap;
}
.device-label-field{
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.device-label-field-sm{
  min-width:0;
}
.device-label-metric-field{
  width:54px;
  flex:0 0 54px;
}
.device-label-metric-field .input{
  min-width:0;
  width:100%;
  min-height:34px;
  padding:6px 4px;
  text-align:center;
}
.device-label-select{
  min-width:122px;
  width:122px;
  min-height:34px;
  padding:6px 28px 6px 8px;
}
.device-label-length{
  min-width:0;
}
.device-label-title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0;
}
.device-label-subtitle{
  white-space:nowrap;
}
.device-label-card--qr-only .device-label-select{
  opacity:.65;
}
.device-label-preview-wrap{
  display:flex;
  justify-content:center;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,.03));
}
.device-label-frame{
  width:280px;
  height:560px;
  border:0;
  background:#fff;
  border-radius:14px;
}
#normLimitsTable{
  table-layout:auto;
}
#normLimitsTable .norm-limit-value,
#normLimitsTable .norm-limit-value-head{
  width:72px;
  min-width:72px;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}
#normLimitsTable .norm-limit-unit,
#normLimitsTable .norm-limit-unit-head{
  width:64px;
  min-width:64px;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}
.device-list{
  gap:0;
  margin-top:8px;
}
.device-row{
  padding:8px 10px;
}
.device-row-top-left{
  gap:8px;
}
.device-row-actions{
  gap:6px;
}
.device-row-actions .btn{
  padding:6px 9px;
  min-height:34px;
}
.device-row-text .t1 .name{
  font-size:13px;
}
.device-row-text .t2{
  font-size:11.5px;
}
.listbar{
  gap:8px;
  padding:8px;
}
#devicesPagerBar .btn,
#devicesPagerBarBottom .btn{
  min-height:34px;
  padding:6px 10px;
}
@media (max-width: 700px){
  #devicesHeaderCard .dh-help{
    margin-left:0;
  }
  #devicesHeaderCard #devTemplateSelect{
    max-width:50% !important;
    width:50% !important;
    flex:0 0 50% !important;
  }
  #devicesHeaderCard .dh-row label[for],
  #devicesHeaderCard .dh-row > label.muted{
    min-width:0 !important;
  }
}


/* V8-42 devices compact spacing and report row toggle */
#devicesHeaderCard .devices-header.compact{
  row-gap:0;
}
#devicesHeaderCard .devices-header.compact .dh-row{
  gap:6px;
  margin-bottom:4px;
}
#devicesHeaderCard .devices-header.compact .dh-sep{
  margin:4px 0;
}
#devicesHeaderCard .devices-header.compact .btn{
  padding:7px 10px;
}
#devicesHeaderCard .devices-header.compact .input,
#devicesHeaderCard .devices-header.compact select{
  padding:7px 9px;
}
#devicesHeaderCard .dh-spacer{
  min-width:4px;
}
#devicesHeaderCard #devReportRow{
  display:none;
}
@media (max-width:700px){
  #devicesHeaderCard #devTemplateSelect{
    max-width:50% !important;
    width:50% !important;
    flex:0 0 50% !important;
  }
}


/* V8-43 devices search fix and report separator toggle */
#devicesHeaderCard .dh-report-sep{
  display:none;
}
#devicesHeaderCard .devices-header.compact .dh-row{
  gap:4px;
}
#devicesHeaderCard .devices-header.compact .muted{
  margin-right:2px;
}


/* V8-46 mobile compact devices and settings tables */
@media (max-width:700px){
  #devicesHeaderCard .dh-row:first-child{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:4px;
    overflow-x:auto;
    padding-bottom:2px;
  }
  #devicesHeaderCard .dh-row:first-child > .muted,
  #devicesHeaderCard .dh-row:first-child > .input,
  #devicesHeaderCard .dh-row:first-child > .dh-spacer{
    flex:0 0 auto;
  }
  #devicesHeaderCard .dh-row:first-child > .input{
    width:auto;
    max-width:140px !important;
    min-width:110px !important;
    flex:1 1 auto;
  }
  #devicesHeaderCard #devQrCameraBtn,
  #devicesHeaderCard #devExportCsvBtn,
  #devicesHeaderCard #devExportQrBtn,
  #devicesHeaderCard #devReportBulkBtn{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    padding:7px 8px;
    white-space:nowrap;
  }
  #devicesHeaderCard .dh-row:first-child .dh-spacer{
    display:none;
  }

  .device-row{
    padding:8px 8px;
    gap:4px;
  }
  .device-row-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:6px;
  }
  .device-row-top-left{
    min-width:0;
    gap:6px;
  }
  .device-row-actions{
    width:auto;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:4px;
  }
  .device-row-actions .btn{
    min-width:0;
    padding:5px 7px;
    min-height:30px;
    font-size:12px;
  }
  .device-row-text .t1 .name{
    font-size:12.5px;
  }
  .device-row-text .t2{
    font-size:11px;
    line-height:1.3;
  }
  .device-row-text .sep{
    margin:0 4px;
  }
  .idtail{
    width:auto;
    min-width:24px;
  }

  #viewSettings .table-wrap{
    overflow:visible;
  }
  #viewSettings #instrTable,
  #viewSettings #workersTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  #viewSettings #instrTable thead,
  #viewSettings #workersTable thead{
    display:none;
  }
  #viewSettings #instrTable tbody,
  #viewSettings #workersTable tbody{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #viewSettings #instrTable tr,
  #viewSettings #workersTable tr{
    display:block;
    border:1px solid rgba(17,24,39,.08);
    border-radius:14px;
    padding:10px;
    background:var(--card);
    box-shadow:none;
  }
  #viewSettings #instrTable td,
  #viewSettings #workersTable td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    border:none;
    padding:6px 0;
    text-align:right;
    white-space:normal;
  }
  #viewSettings #instrTable td::before,
  #viewSettings #workersTable td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--muted);
    text-align:left;
    flex:0 0 42%;
  }
  #viewSettings #instrTable td:last-child,
  #viewSettings #workersTable td:last-child{
    display:block;
    padding-top:8px;
  }
  #viewSettings #instrTable td:last-child::before,
  #viewSettings #workersTable td:last-child::before{
    display:block;
    margin-bottom:8px;
  }
  #viewSettings #instrTable td:last-child .btn,
  #viewSettings #workersTable td:last-child .btn{
    width:auto;
    min-width:0;
    margin-right:6px;
    margin-bottom:6px;
  }
  #viewSettings .acc-body .row,
  #viewSettings .acc-body .hdr{
    flex-wrap:wrap;
  }
}


/* V8-47 mobile devices two-row header */
#devicesHeaderCard .dh-top-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
#devicesHeaderCard .dh-mobile-row{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
#devicesHeaderCard .dh-mobile-searchrow .input{
  flex:1 1 auto;
}
#devicesHeaderCard .dh-mobile-actionsrow{
  margin-left:auto;
}
@media (max-width:700px){
  #devicesHeaderCard .dh-top-controls{
    display:block;
  }
  #devicesHeaderCard .dh-top-controls > .dh-spacer{
    display:none;
  }
  #devicesHeaderCard .dh-mobile-row{
    display:flex;
    align-items:center;
    gap:4px;
    width:100%;
  }
  #devicesHeaderCard .dh-mobile-searchrow{
    margin-bottom:4px;
  }
  #devicesHeaderCard .dh-mobile-searchrow > .muted{
    flex:0 0 auto;
    white-space:nowrap;
  }
  #devicesHeaderCard .dh-mobile-searchrow > .input{
    width:auto;
    max-width:none !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  #devicesHeaderCard .dh-mobile-searchrow > #devQrCameraBtn{
    width:auto !important;
    flex:0 0 auto !important;
    max-width:none !important;
    min-width:0 !important;
    white-space:nowrap;
  }
  #devicesHeaderCard .dh-mobile-actionsrow{
    justify-content:flex-start;
    margin-left:0;
  }
  #devicesHeaderCard .dh-mobile-actionsrow > .btn{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    white-space:nowrap;
    padding:7px 8px;
  }
}