/* ASK K.I.S. Enterprise 6.4.1 — first-login password change, backup, Android download, actual network priority, clear IDLE label, fault reset and mobile improvements.
   This file only extends the existing design and does not replace style.css. */

/* Mandatory first-login password change. */
.password-change-card {
  width: min(460px, calc(100% - 28px));
  margin-top: max(24px, 5vh);
}

.password-change-card h1 {
  margin: 18px 0 8px;
  font-size: clamp(24px, 4vw, 32px);
}

.password-change-card label {
  display: block;
  margin-top: 12px;
  font-weight: 750;
}

.password-change-card button {
  width: 100%;
  margin-top: 10px;
}

.first-login-lock {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: 20px;
  background: rgba(29, 78, 216, 0.22);
  font-size: 32px;
}

.password-policy {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.password-change-logout {
  background: transparent;
}

.temporary-password-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 999px;
  color: var(--y);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 680px) {
  .password-change-card {
    margin-top: 20px;
    padding: 20px;
  }
}

.active-fault {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(248, 64, 64, .72);
  border-radius: 14px;
  color: #ffe7e7;
  background: linear-gradient(135deg, rgba(127, 29, 29, .62), rgba(65, 12, 23, .7));
  box-shadow: 0 12px 28px rgba(90, 0, 8, .24);
}

.active-fault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.active-fault p {
  margin: 0;
  line-height: 1.45;
}

.fault-code {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font: 800 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  background: rgba(0, 0, 0, .25);
}

.network-badge.wifi {
  border-color: rgba(59, 130, 246, .62);
  background: rgba(30, 64, 175, .2);
}

.network-badge.ethernet {
  border-color: rgba(34, 197, 94, .55);
  background: rgba(20, 83, 45, .2);
}

.network-badge.unknown {
  border-color: rgba(148, 163, 184, .4);
}

.controls .fault-reset {
  border-color: rgba(248, 113, 113, .75);
  color: #fff;
  background: linear-gradient(135deg, #991b1b, #dc2626);
  box-shadow: 0 10px 24px rgba(127, 29, 29, .28);
}

.controls .fault-reset:hover {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
}

.readiness-card {
  position: relative;
  overflow: visible;
  cursor: help;
  outline: none;
}

.readiness-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .45);
}

.readiness-card.has-issues {
  border-color: rgba(245, 158, 11, .58);
}

.readiness-hint {
  color: var(--muted);
  font-size: 11px;
}

.readiness-details {
  position: absolute;
  z-index: 60;
  top: calc(100% + 9px);
  right: 0;
  display: none;
  width: min(480px, calc(100vw - 30px));
  padding: 14px;
  border: 1px solid rgba(71, 112, 171, .7);
  border-radius: 15px;
  text-align: left;
  color: var(--text);
  background: rgba(5, 15, 30, .98);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .62);
}

.readiness-card.details-open .readiness-details,
.readiness-card:focus-visible .readiness-details {
  display: grid;
  gap: 10px;
}

@media (hover: hover) {
  .readiness-card:hover .readiness-details {
    display: grid;
    gap: 10px;
  }
}

.readiness-details-head {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(71, 112, 171, .35);
}

.readiness-details-head span {
  color: var(--muted);
  font-size: 11px;
}

.readiness-check-list {
  display: grid;
  gap: 7px;
}

.readiness-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border-radius: 10px;
  background: rgba(30, 41, 59, .58);
}

.readiness-check > div,
.readiness-check strong,
.readiness-check small {
  display: block;
  min-width: 0;
}

.readiness-check small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.3;
}

.readiness-check.failed {
  background: rgba(127, 29, 29, .3);
}

.toast .toast-device,
.notification-entry .n-meta,
.notification-item .n-meta {
  margin-top: 6px;
  color: #8fb8e8;
  font-size: 11px;
}

.toast .toast-text,
.notification-entry .n-text,
.notification-item .n-text {
  line-height: 1.42;
  white-space: normal;
}

.notification-entry,
.notification-item {
  cursor: pointer;
}

.notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 9px;
  padding: 14px;
  border: 1px solid var(--b);
  border-radius: 14px;
  background: #0b1222;
}

.notification-entry.severity-bad,
.notification-item.severity-bad {
  border-color: rgba(239, 68, 68, .64);
  background: rgba(127, 29, 29, .25);
}

.notification-entry.severity-warn,
.notification-item.severity-warn {
  border-color: rgba(245, 158, 11, .5);
}

.notification-entry .n-content,
.notification-item .n-content {
  min-width: 0;
}

.notification-item .n-title {
  font-weight: 900;
}

body.light-theme .readiness-details,
body.light-theme .notification-item {
  color: #10213c;
  background: rgba(255, 255, 255, .99);
}

.notification-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.notification-filter-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.notification-filter-grid select,
.notification-filter-grid input {
  width: 100%;
}

@media (max-width: 900px) {
  .notification-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ASK K.I.S. Enterprise 6.9.10 R2 — interactive device diagram. */
.mnemo-action,
.indicator-action {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.mnemo-action:hover,
.mnemo-action:focus-visible,
.indicator-action:hover,
.indicator-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(84, 163, 255, .82) !important;
  box-shadow: 0 10px 28px rgba(12, 73, 160, .24);
  outline: none;
}

.mnemo-action:active,
.indicator-action:active {
  transform: translateY(0);
}

.mnemo-action-hint {
  display: block;
  margin-top: 7px;
  color: #7f96ba;
  font-size: 10px;
  font-weight: 700;
}

.mode-choice-grid {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.mode-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #30496d;
  border-radius: 15px;
  background: rgba(5, 18, 38, .72);
  cursor: pointer;
}

.mode-choice.selected {
  border-color: #4b92ff;
  background: rgba(24, 75, 155, .28);
  box-shadow: inset 3px 0 0 #54a3ff;
}

.mode-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: .68;
}

.mode-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #4b92ff;
}

.mode-choice-icon { font-size: 25px; }
.mode-choice strong,
.mode-choice small { display: block; }
.mode-choice small { margin-top: 4px; color: #91a5c4; line-height: 1.35; }

.action-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.action-status-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(98, 130, 174, .28);
  border-radius: 13px;
  background: rgba(3, 15, 32, .58);
}

.action-status-grid span { color: #8196b5; font-size: 12px; }
.action-status-grid strong { overflow-wrap: anywhere; }
.action-dialog-note { margin: 14px 0; color: #a9bad3; line-height: 1.5; }
.action-dialog-note.warn { color: #f7c66b; }

body.light-theme .mode-choice,
body.light-theme .action-status-grid > div {
  background: rgba(232, 241, 252, .88);
  border-color: rgba(74, 105, 150, .28);
}

body.light-theme .mode-choice.selected {
  background: rgba(64, 124, 210, .15);
}

@media (max-width: 520px) {
  .action-status-grid { grid-template-columns: 1fr; }
  .mode-choice { grid-template-columns: auto auto minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .notification-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ASK K.I.S. Enterprise 6.4.0 — verified backup management. */
.backup-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.backup-status-card h2,
.backup-storage-card h2 {
  margin: 10px 0;
}

.backup-meta {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: var(--muted);
}

.backup-storage-card button {
  margin: 8px 8px 0 0;
}

.backup-list-card {
  margin-bottom: 18px;
}

.backup-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.backup-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.backup-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.backup-table th,
.backup-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--b);
  vertical-align: middle;
}

.backup-table th {
  color: var(--muted);
  font-size: .85rem;
}

.backup-filename {
  max-width: 340px;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.backup-kind {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--b);
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 900;
}

.backup-kind.kind-weekly { color: #a78bfa; }
.backup-kind.kind-manual { color: #38bdf8; }
.backup-kind.kind-pre_restore { color: #f59e0b; }

.backup-restore-note code,
.backup-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 760px) {
  .backup-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .backup-storage-card button {
    width: 100%;
    margin: 8px 0 0;
  }

  .backup-list-card {
    padding: 14px;
  }
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: center;
  gap: 18px;
}

.guide-hero h2 {
  margin: 4px 0 8px;
}

.guide-kicker {
  color: #f5c518;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-safety,
.guide-note,
.guide-warning {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 158, 11, .5);
  border-radius: 14px;
  background: rgba(146, 64, 14, .16);
}

.guide-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.guide-index button {
  min-height: 48px;
  padding: 9px 12px;
  border-color: rgba(71, 112, 171, .52);
  background: linear-gradient(145deg, #102542, #0b1930);
}

.guide-list {
  display: grid;
  gap: 11px;
}

.guide-section {
  scroll-margin-top: 112px;
  overflow: hidden;
  border: 1px solid rgba(71, 112, 171, .48);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(14, 35, 66, .96), rgba(7, 20, 39, .98));
}

.guide-section > summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}

.guide-section > summary::-webkit-details-marker {
  display: none;
}

.guide-section > summary > span {
  font-size: 25px;
}

.guide-section > summary div,
.guide-section > summary strong,
.guide-section > summary small {
  display: block;
  min-width: 0;
}

.guide-section > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
}

.guide-section[open] > summary {
  border-bottom: 1px solid rgba(71, 112, 171, .35);
  background: rgba(30, 64, 115, .24);
}

.guide-body {
  padding: 15px 20px 18px;
  line-height: 1.55;
}

.guide-body ol,
.guide-body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 23px;
}

.guide-body code {
  padding: 2px 6px;
  border-radius: 6px;
  color: #a8d3ff;
  background: #041020;
}

.guide-note,
.guide-warning {
  margin: 14px 0 0;
}

.guide-troubleshooting {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guide-troubleshooting > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(71, 112, 171, .42);
  border-radius: 12px;
  background: rgba(4, 16, 32, .62);
}

body.light-theme .guide-index button,
body.light-theme .guide-section {
  color: #10213c;
  border-color: rgba(37, 99, 235, .24);
  background: linear-gradient(145deg, #fff, #edf4ff);
}

body.light-theme .guide-body code {
  color: #1d4ed8;
  background: #e6efff;
}

@media (max-width: 700px) {
  .guide-hero {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
  }

  .guide-hero h2 {
    font-size: 22px;
  }

  .guide-hero p,
  .guide-safety {
    font-size: 13px;
  }

  .guide-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0;
  }

  .guide-index button {
    min-height: 45px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .guide-list {
    gap: 8px;
  }

  .guide-section {
    scroll-margin-top: 84px;
    border-radius: 14px;
  }

  .guide-section > summary {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 12px;
  }

  .guide-section > summary > span {
    font-size: 21px;
  }

  .guide-section > summary strong {
    font-size: 14px;
  }

  .guide-section > summary small {
    font-size: 11px;
  }

  .guide-body {
    padding: 12px 14px 15px;
    font-size: 13px;
  }

  .guide-troubleshooting {
    grid-template-columns: 1fr;
  }
}

/* Keep every calibration label and its value on separate layout rows. */
.calibration-grid .sensor-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calibration-grid .sensor-status > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 96px;
}

.calibration-grid .sensor-status > div > span,
.calibration-grid .sensor-status > div > strong {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.calibration-grid .sensor-status > div > span {
  min-height: 32px;
}

.calibration-grid .sensor-status > div > strong {
  font-size: 22px;
}

.calibration-grid .sensor-status .cal-value {
  font-size: clamp(24px, 2.25vw, 30px);
}

.calibration-grid .cal-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  line-height: 1.25;
}

.calibration-grid .cal-form input {
  width: 100%;
  min-width: 0;
}

.dashboard-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

.dashboard-quick-nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 9px 12px;
  text-align: left;
  border-color: rgba(71, 112, 171, .52);
  background: linear-gradient(145deg, #102542, #0b1930);
}

.dashboard-quick-nav button > span:not(.dashboard-nav-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-nav-icon {
  font-size: 20px;
}

.dashboard-quick-nav strong {
  display: grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #071b12;
  background: #24d978;
}

.dashboard-section-card {
  scroll-margin-top: 112px;
}

body.light-theme .dashboard-quick-nav button {
  color: #10213c;
  border-color: rgba(37, 99, 235, .24);
  background: linear-gradient(145deg, #fff, #edf4ff);
}

body.device-view .page-top {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: auto;
  padding-block: 14px;
}

body.device-view .page-top .back-btn {
  display: none !important;
}

body.device-view .page-top > div {
  min-width: 0;
  text-align: left;
}

body.device-view .page-top h1 {
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.1;
}

body.device-view .page-top .muted {
  margin-top: 5px;
}

.device-quick-nav {
  position: sticky;
  top: calc(94px + env(safe-area-inset-top, 0px));
  z-index: 45;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid rgba(71, 112, 171, .48);
  border-radius: 18px;
  background: rgba(8, 24, 47, .96);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}

.app-header.auto-hidden ~ .app-main .device-quick-nav {
  top: 10px;
}

.device-switcher {
  display: grid;
  grid-template-columns: max-content 46px minmax(260px, 1fr) 46px max-content;
  align-items: stretch;
  gap: 9px;
}

.device-switcher button,
.device-select-wrap select,
.device-tabs button {
  min-height: 44px;
  border: 1px solid rgba(71, 112, 171, .52);
  border-radius: 12px;
  color: #f5f8ff;
  background: #0d1d36;
  font: inherit;
}

.device-switcher button {
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}

.device-switcher button:hover,
.device-switcher button:focus-visible,
.device-select-wrap select:hover,
.device-select-wrap select:focus-visible,
.device-tabs button:hover,
.device-tabs button:focus-visible {
  border-color: #4f9cff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 156, 255, .16);
}

.device-step-button {
  padding: 0 !important;
  font-size: 31px !important;
  line-height: 1;
}

.device-step-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.device-select-wrap {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 12px;
  border: 1px solid rgba(71, 112, 171, .52);
  border-radius: 12px;
  background: #0d1d36;
}

.device-select-wrap > span {
  color: #91a9ce;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.device-select-wrap select {
  width: 100%;
  min-width: 0;
  border: 0;
  border-left: 1px solid rgba(71, 112, 171, .38);
  border-radius: 0 11px 11px 0;
  padding: 0 38px 0 12px;
  font-weight: 800;
  cursor: pointer;
}

.device-tabs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.device-tabs button {
  flex: 1 0 max-content;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 800;
}

.device-tabs button.active {
  border-color: #18cf6c;
  color: #071b12;
  background: #24d978;
  box-shadow: 0 8px 24px rgba(24, 207, 108, .24);
}

body.device-view #pageContent > .tab-panel {
  display: none;
}

body.device-view #pageContent > .tab-panel.active {
  display: block;
}

body.device-view #tab-overview > .hero {
  margin-top: 0;
}

body.light-theme .device-quick-nav {
  border-color: rgba(37, 99, 235, .24);
  background: rgba(246, 249, 255, .96);
  box-shadow: 0 14px 34px rgba(25, 54, 95, .15);
}

body.light-theme .device-switcher button,
body.light-theme .device-select-wrap,
body.light-theme .device-select-wrap select,
body.light-theme .device-tabs button {
  color: #10213c;
  background: #fff;
}

body.light-theme .device-tabs button.active {
  color: #062514;
  background: #2ed77c;
}

@media (max-width: 980px) {
  .device-switcher {
    grid-template-columns: max-content 44px minmax(180px, 1fr) 44px;
  }

  .device-rename-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .app-header .header-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
    padding-inline: 7px !important;
  }

  .app-header .brand-wrap {
    min-width: 0;
    overflow: hidden;
  }

  .app-header .brand {
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    text-overflow: clip;
    white-space: nowrap;
  }

  .app-header .brand .gold,
  .app-header .version,
  .app-header .system-strip,
  .app-header #serverClock,
  .app-header #installPwaBtn,
  .app-header #wallboardBtn,
  .app-header #refreshBtn {
    display: none !important;
  }

  .app-header .header-actions {
    gap: 4px;
  }

  .app-header .icon-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
  }

  .compact-breadcrumb {
    overflow-x: auto;
    text-overflow: clip;
    scrollbar-width: none;
  }

  .compact-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  body.dashboard-view .app-main {
    padding: 9px 8px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.dashboard-view .page-top {
    margin-bottom: 10px;
  }

  body.dashboard-view .page-top h1 {
    font-size: 27px;
    line-height: 1.05;
  }

  body.dashboard-view .page-top .muted {
    margin-top: 4px;
    font-size: 14px;
  }

  .dashboard-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
  }

  .dashboard-quick-nav button {
    min-height: 48px;
    padding: 7px 10px;
    gap: 7px;
    border-radius: 13px;
    font-size: 13px;
  }

  .dashboard-nav-icon {
    font-size: 18px;
  }

  .dashboard-quick-nav strong {
    min-width: 22px;
    min-height: 22px;
    font-size: 12px;
  }

  body.dashboard-view .attention-toolbar {
    display: grid;
    grid-template-columns: .62fr 1.65fr 1fr;
    gap: 6px;
    margin-bottom: 9px;
  }

  body.dashboard-view .attention-toolbar button {
    min-width: 0;
    min-height: 42px;
    padding: 6px 5px;
    font-size: 12px;
    line-height: 1.12;
  }

  body.dashboard-view .summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
    margin-bottom: 10px;
  }

  body.dashboard-view .summary-item {
    min-width: 0;
    min-height: 76px;
    padding: 9px;
    border-radius: 13px;
  }

  body.dashboard-view .summary-item span {
    min-height: 27px;
    font-size: 10px;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  body.dashboard-view .summary-item strong {
    margin-top: 3px;
    font-size: 20px;
    line-height: 1;
  }

  body.dashboard-view .dashboard-section-card {
    margin-bottom: 10px;
    padding: 13px;
    scroll-margin-top: 86px;
  }

  body.dashboard-view .dashboard-section-card .section-title {
    margin-bottom: 9px;
  }

  body.dashboard-view .dashboard-section-card .section-title h2 {
    margin-bottom: 4px;
    font-size: 21px;
  }

  body.dashboard-view .dashboard-section-card .section-title .muted {
    font-size: 12px;
  }

  body.dashboard-view #dashboardHealth .indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.dashboard-view #dashboardHealth .indicator {
    min-width: 0;
    min-height: 110px;
    padding: 11px;
    border-radius: 14px;
  }

  body.dashboard-view #dashboardHealth .indicator-title {
    font-size: 13px;
  }

  body.dashboard-view #dashboardHealth .indicator-value {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  body.device-view .app-main {
    padding: 8px 8px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.device-view .page-top {
    display: none;
  }

  body.device-view #pageContent,
  body.device-view #pageContent > .tab-panel,
  body.device-view #pageContent .card {
    min-width: 0;
    max-width: 100%;
  }

  .device-quick-nav {
    position: relative;
    top: auto !important;
    margin: 0 0 10px;
    padding: 9px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  }

  .app-header.auto-hidden ~ .app-main .device-quick-nav {
    top: auto;
  }

  .device-switcher {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 7px;
  }

  .device-all-button {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .device-switcher:not(:has(.device-rename-button)) .device-all-button {
    grid-column: 1 / -1;
  }

  .device-step-button {
    display: none;
  }

  .device-select-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .device-select-wrap > span {
    display: none;
  }

  .device-select-wrap select {
    min-height: 46px;
    border-left: 0;
    border-radius: 11px;
    padding-left: 12px;
  }

  .device-rename-button {
    grid-column: 2;
    grid-row: 1;
    padding: 0 !important;
    font-size: 19px !important;
  }

  .device-rename-button span {
    display: none;
  }

  .device-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 8px;
    overflow: visible;
  }

  .device-tabs button {
    grid-column: span 2;
    min-width: 0;
    min-height: 42px;
    padding: 6px 4px;
    font-size: 13px;
    line-height: 1.12;
    white-space: normal;
  }

  .device-tabs button:nth-last-child(-n + 2):nth-child(n + 4) {
    grid-column: span 3;
  }

  body.device-view #tab-overview > .hero {
    gap: 10px;
    margin-bottom: 10px;
  }

  body.device-view #tab-overview .hero-main {
    padding: 16px;
    border-radius: 18px;
  }

  body.device-view #tab-overview .hero-state {
    font-size: clamp(29px, 9vw, 38px);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  body.device-view #tab-overview .hero-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    margin-top: 13px;
  }

  body.device-view #tab-overview .hero-meta .status-badge {
    min-width: 0;
    padding: 7px 10px;
    font-size: 14px;
  }

  body.device-view #tab-overview .hero-meta .status-badge:last-child {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
  }

  body.device-view #tab-overview .readiness-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-content: stretch;
    justify-items: start;
    gap: 4px 12px;
    min-height: 126px;
    padding: 12px 16px;
    text-align: left;
  }

  body.device-view #tab-overview .readiness-card > label {
    align-self: end;
  }

  body.device-view #tab-overview .readiness-card > .muted {
    align-self: start;
  }

  body.device-view #tab-overview .readiness-hint {
    grid-column: 2;
    align-self: start;
  }

  body.device-view #tab-overview .readiness-details {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    box-shadow: none;
  }

  body.device-view #tab-overview .readiness-card.details-open .readiness-details,
  body.device-view #tab-overview .readiness-card:focus-visible .readiness-details {
    display: grid;
    gap: 9px;
  }

  body.device-view #tab-overview .active-fault {
    padding: 12px;
  }

  body.device-view #tab-overview .active-fault-head {
    align-items: flex-start;
  }

  body.device-view #tab-overview .readiness-ring {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 104px;
    height: 104px;
    margin: 0;
  }

  body.device-view #tab-overview .readiness-ring strong {
    font-size: 25px;
  }

  body.device-view #tab-overview .readiness-ring.offline {
    background: #334155;
  }

  body.device-view #tab-overview .readiness-ring.offline strong {
    color: #b8c4d8;
  }

  body.device-view #tab-overview .indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
  }

  body.device-view #tab-overview .indicator {
    min-width: 0;
    min-height: 118px;
    padding: 12px;
    border-radius: 15px;
  }

  body.device-view #tab-overview .indicator-title {
    min-width: 0;
    font-size: 14px;
  }

  body.device-view #tab-overview .indicator-value {
    font-size: clamp(21px, 6.5vw, 28px);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  body.device-view #tab-overview .indicator-note {
    font-size: 12px;
    line-height: 1.25;
  }

  body.device-view #tab-overview .mnemo-card {
    padding: 14px;
  }

  body.device-view #tab-overview .mnemo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    min-height: 0;
  }

  body.device-view #tab-overview .mnemo-source,
  body.device-view #tab-overview .mnemo-gen {
    min-width: 0;
    padding: 12px 8px;
  }

  body.device-view #tab-overview .mnemo-flow {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    gap: 7px;
  }

  body.device-view #tab-overview .power-line {
    width: 100%;
    height: 6px;
    min-width: 20px;
    margin: 0;
  }

  body.device-view #tab-overview .mnemo-ats {
    min-width: 112px;
    padding: 12px;
    border-radius: 14px;
  }

  body.device-view #tab-overview .mnemo-icon {
    font-size: 26px;
  }

  body.device-view #tab-overview .mnemo-value {
    margin-top: 5px;
    font-size: 22px;
  }

  body.device-view #tab-overview .auto-mode-card {
    align-items: flex-start;
    gap: 9px;
    padding: 16px;
  }

  body.device-view #tab-overview .auto-mode-card .big {
    min-width: 0;
    font-size: 31px;
    text-align: left;
  }

  body.device-view #tab-overview .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 10px 0;
  }

  body.device-view #tab-overview .controls button {
    min-width: 0;
    min-height: 52px;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.15;
  }

  body.device-view #tab-overview .controls .test,
  body.device-view #tab-overview .controls .fault-reset,
  body.device-view #tab-overview .controls #calibrationBtn {
    grid-column: 1 / -1;
  }

  body.device-view #tab-overview .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body.device-view #tab-overview .summary-item {
    min-width: 0;
    padding: 11px;
  }

  body.device-view #tab-overview .summary-item:last-child {
    grid-column: 1 / -1;
  }

  body.device-view #tab-overview .summary-item strong {
    font-size: 19px;
    overflow-wrap: anywhere;
  }

  body.device-view .chart-toolbar,
  body.device-view .detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.device-view .chart-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.device-view .chart-toolbar button,
  body.device-view .detail-actions button {
    min-width: 0;
    padding-inline: 6px;
    font-size: 13px;
  }

  body.device-view .chart-card {
    min-width: 0;
    padding: 10px;
  }

  body.device-view #tab-charts > .card {
    padding: 12px;
  }

  body.device-view .chart-grid {
    gap: 10px;
  }

  body.device-view .chart-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
  }

  body.device-view .chart-card canvas {
    height: 150px;
  }

  body.device-view .detail-panel {
    min-width: 0;
    padding: 10px;
  }

  body.device-view .detail-panel pre {
    max-width: 100%;
    max-height: 56vh;
    overflow: auto;
    font-size: 11px;
  }

  .mobile-bottom-nav {
    min-height: 66px;
  }

  .mobile-bottom-nav button {
    min-width: 0;
  }

  .mobile-bottom-nav span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 370px) {
  .app-header .brand {
    font-size: 17px;
  }

  .app-header .icon-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .device-tabs button {
    font-size: 12px;
  }

  body.device-view #tab-overview .indicator {
    min-height: 112px;
    padding: 10px;
  }

  body.device-view #tab-overview .indicator-title {
    font-size: 13px;
  }
}

/* ASK K.I.S. Enterprise — Android APK download page. */
.android-app-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.android-app-icon {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 1px solid rgba(43, 125, 255, 0.55);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(22, 84, 184, 0.42), rgba(5, 25, 55, 0.7));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  font-size: 58px;
}

.android-download-button,
.android-details-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 20px;
  border: 1px solid rgba(34, 211, 116, 0.8);
  border-radius: 14px;
  background: linear-gradient(135deg, #12b85c, #20df7a);
  color: #03170c;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.android-details-button {
  border-color: rgba(71, 133, 230, 0.65);
  background: rgba(14, 43, 86, 0.82);
  color: var(--text);
}

.about-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.android-install-card ol {
  display: grid;
  gap: 10px;
  padding-left: 24px;
}

.android-checksum-card code {
  display: block;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 13, 31, 0.7);
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 680px) {
  .android-app-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .android-app-icon {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    font-size: 42px;
  }

  .android-download-button,
  .android-details-button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ASK K.I.S. Enterprise 6.5.1 — real responsive navigation and account UI. */
.mobile-bottom-nav button.active {
  color: #fff;
  border-color: rgba(52, 113, 255, .7);
  background: linear-gradient(145deg, rgba(22, 76, 181, .92), rgba(26, 88, 222, .78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,55,160,.25);
}

.profile-dashboard { display:grid; gap:14px; }
.account-profile-card { display:flex; align-items:center; gap:16px; }
.account-avatar { display:grid; place-items:center; flex:0 0 72px; width:72px; height:72px; border:1px solid rgba(59,130,246,.55); border-radius:22px; background:linear-gradient(145deg,rgba(30,88,190,.4),rgba(7,27,59,.8)); font-size:34px; }
.account-profile-main { min-width:0; }
.account-profile-main h2 { margin:3px 0 8px; overflow-wrap:anywhere; }
.account-role { display:inline-flex; padding:5px 10px; border:1px solid rgba(72,123,199,.55); border-radius:999px; color:#dbeafe; background:rgba(30,64,175,.24); font-size:12px; font-weight:800; }
.profile-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-action-grid button { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px 10px; min-height:82px; padding:14px; text-align:left; font-size:22px; }
.profile-action-grid button span { min-width:0; font-size:15px; font-weight:800; }
.profile-action-grid button small { grid-column:2; color:var(--muted); font-size:11px; font-weight:500; }
.profile-action-grid .profile-danger { border-color:rgba(239,68,68,.5); background:rgba(127,29,29,.24); }

@media (max-width: 900px) {
  .mobile-bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  .mobile-bottom-nav button { min-height:58px; border-radius:13px; }
  .mobile-bottom-nav button:active { transform:scale(.97); }
}

@media (max-width: 680px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .app-main, #pageContent, .card, .user-layout { min-width:0; max-width:100%; box-sizing:border-box; }
  .user-form-grid { grid-template-columns:1fr; gap:11px; }
  #createUserBtn { width:100%; min-height:48px; }
  .user-table-wrap { overflow:visible; }
  .user-table { display:block; min-width:0; width:100%; }
  .user-table thead { display:none; }
  .user-table tbody { display:grid; gap:12px; }
  .user-table tr { display:grid; gap:0; padding:4px 14px; border:1px solid var(--b); border-radius:16px; background:rgba(8,24,48,.78); }
  .user-table td { display:grid; grid-template-columns:minmax(82px,34%) minmax(0,1fr); align-items:center; gap:10px; min-width:0; padding:11px 0; border-bottom:1px solid rgba(67,101,148,.28); overflow-wrap:anywhere; }
  .user-table td:last-child { border-bottom:0; }
  .user-table td::before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
  .user-table td[colspan] { display:block; text-align:center; }
  .user-table td[colspan]::before { display:none; }
  .user-role-select { min-width:0; width:100%; }
  .user-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .user-actions button { width:100%; min-width:0; }
  .section-title { align-items:flex-start; }
  .section-title > button { flex:0 0 auto; }
  .account-profile-card { padding:15px; }
  .account-avatar { flex-basis:58px; width:58px; height:58px; border-radius:18px; font-size:28px; }
  .profile-action-grid { grid-template-columns:1fr; }
}

@media (max-width: 370px) {
  .mobile-bottom-nav button { padding-inline:1px !important; font-size:17px !important; }
  .mobile-bottom-nav span { font-size:9px !important; }
  .user-table td { grid-template-columns:1fr; gap:5px; }
}


/* ASK K.I.S. 6.5.2 — зрозумілий журнал подій */
.event-journal{display:grid;gap:10px;max-height:68vh;overflow:auto;padding:4px}
.journal-event{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px;border:1px solid var(--b);border-radius:16px;background:rgba(10,24,48,.72);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.journal-event-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(148,163,184,.12);font-size:22px}
.journal-event-body{min-width:0}
.journal-event-title{font-weight:800;font-size:16px;line-height:1.25;color:var(--text,#e8eefb)}
.journal-event-detail{margin-top:5px;color:var(--muted,#95a4bd);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.journal-event-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:9px;color:var(--muted,#95a4bd);font-size:12px}
.journal-event.journal-success{border-color:rgba(34,197,94,.36)}
.journal-event.journal-warning{border-color:rgba(245,158,11,.46)}
.journal-event.journal-danger{border-color:rgba(239,68,68,.48)}
.journal-event.journal-info{border-color:rgba(59,130,246,.42)}
.journal-event.journal-success .journal-event-icon{background:rgba(34,197,94,.14)}
.journal-event.journal-warning .journal-event-icon{background:rgba(245,158,11,.14)}
.journal-event.journal-danger .journal-event-icon{background:rgba(239,68,68,.14)}
.journal-event.journal-info .journal-event-icon{background:rgba(59,130,246,.14)}
.journal-empty{padding:28px 16px;text-align:center;color:var(--muted,#95a4bd)}
@media(max-width:520px){.event-journal{max-height:none}.journal-event{grid-template-columns:40px minmax(0,1fr);padding:12px}.journal-event-icon{width:40px;height:40px}.journal-event-title{font-size:15px}.journal-event-meta{display:grid;justify-content:start}}


/* ASK K.I.S. UI 6.5.3 — журнал з описом і компактне меню пристроїв */
.journal-event{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;appearance:none}
.journal-event:hover,.journal-event:focus-visible{transform:translateY(-1px);border-color:rgba(59,130,246,.7);outline:none}
.journal-event-hint{margin-top:8px;color:#6f86aa;font-size:11px}
.event-description-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px}
.event-description-modal.hidden{display:none}
.event-description-backdrop{position:absolute;inset:0;background:rgba(1,7,18,.76);backdrop-filter:blur(5px)}
.event-description-dialog{position:relative;width:min(520px,100%);max-height:min(82vh,720px);overflow:auto;padding:24px;border:1px solid #2b4166;border-radius:24px;background:linear-gradient(180deg,#10213d,#09162a);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.event-description-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:14px}
.event-description-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(59,130,246,.14);font-size:28px}
.event-description-dialog h3{margin:16px 48px 8px 0;font-size:22px}
.event-description-text{color:#a9b8cf;line-height:1.55}
.event-description-meta{display:grid;gap:10px;margin:18px 0}
.event-description-meta>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.15)}
.event-description-meta dt{color:#7f91ad}.event-description-meta dd{margin:0;overflow-wrap:anywhere}
.event-description-technical summary{cursor:pointer;color:#91a4c4}.event-description-technical pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:#93a7c4;background:#071225;padding:12px;border-radius:12px}
/* ASK K.I.S. UI 6.5.4 — вкладка «Пристрої» містить тільки пристрої */
body.drawer-devices-mode .drawer .drawer-scroll > *:not(.global-search):not(#globalSearchResults):not(#devicesGroup){display:none!important}
body.drawer-devices-mode .drawer #devicesGroup{display:block!important;margin:0;border:0;background:transparent;padding:0}
body.drawer-devices-mode .drawer #devicesGroup>summary{display:none!important}
body.drawer-devices-mode .drawer #devicesGroup>.drawer-item[data-view="fleet"]{display:none!important}
body.drawer-devices-mode .drawer #devicesGroup>details{display:block!important;margin:0 0 12px}
body.drawer-devices-mode .drawer #devicesGroup>details>summary{min-height:54px}
body.drawer-devices-mode .drawer .global-search{margin-top:0}
body.drawer-devices-mode .drawer-head .muted::after{content:" · Пристрої"}
@media(max-width:520px){.event-description-dialog{padding:20px;border-radius:20px}.event-description-meta>div{grid-template-columns:1fr;gap:3px}}

/* ASK K.I.S. Enterprise 6.9.10 — simplified application navigation. */
.drawer-context {
  max-width: 270px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-section-label {
  margin: 16px 10px 7px;
  color: #6f86aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drawer-nav-group > summary {
  min-height: 48px;
  box-sizing: border-box;
}

.drawer .drawer-subitem {
  width: calc(100% - 20px);
  margin-inline: 10px;
  padding-left: 14px;
  background: rgba(7, 24, 48, .74);
}

.drawer-item.active,
.drawer details.nav-group-active > summary {
  border-color: rgba(67, 133, 244, .78);
  color: #fff;
  background: linear-gradient(145deg, rgba(20, 70, 155, .92), rgba(20, 91, 204, .72));
  box-shadow: inset 3px 0 0 #54a3ff, 0 8px 22px rgba(0, 45, 120, .18);
}

.drawer .device-link.active {
  border-color: rgba(34, 197, 94, .72);
  background: rgba(20, 92, 58, .34);
  box-shadow: inset 3px 0 0 #22c55e;
}

body.light-theme .drawer-section-label {
  color: #526987;
}

body.light-theme .drawer .drawer-subitem {
  background: rgba(230, 239, 251, .86);
}

body.light-theme .drawer-item.active,
body.light-theme .drawer details.nav-group-active > summary {
  color: #fff;
  background: linear-gradient(145deg, #174c9e, #236ac9);
}

@media (max-width: 900px) {
  .mobile-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .drawer {
    width: min(390px, 94vw);
  }

  .drawer-scroll {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* ASK K.I.S. 6.5.6 — modular device workspace */
.device-status-section,
.device-module-section {
  margin: 0 0 18px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}

.section-heading.compact {
  align-items: center;
}

.section-heading h2 {
  margin: 2px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.15;
}

.section-kicker {
  color: var(--muted, #8fa3bf);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.section-live-note {
  color: var(--muted, #8fa3bf);
  font-size: 12px;
  white-space: nowrap;
}

.device-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  gap: 14px;
  align-items: stretch;
  margin: 0;
}

.device-hero .hero-main,
.device-hero .readiness-card {
  min-height: 100%;
}

.device-hero .hero-main {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15,23,42,.9), rgba(10,18,32,.72));
  padding: 18px;
}

.device-hero .hero-state {
  margin: 4px 0 12px;
  font-size: clamp(26px, 4vw, 42px);
}

.device-hero .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.device-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.device-metrics-grid .indicator {
  min-height: 118px;
  padding: 14px;
  border-radius: 16px;
}

.device-metrics-grid .indicator-value {
  font-size: clamp(20px, 2.5vw, 30px);
}

.mode-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.mode-control-grid > .card {
  margin: 0;
  min-height: 106px;
}

.device-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.device-controls button {
  min-height: 52px;
  border-radius: 14px;
  white-space: normal;
  line-height: 1.15;
}

.device-controls .start,
.device-controls .stop {
  font-size: 16px;
  font-weight: 800;
}

.device-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.device-summary-strip .summary-item {
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 15px;
  background: rgba(15,23,42,.58);
  padding: 14px;
}

.device-summary-strip .summary-item span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted, #8fa3bf);
  font-size: 12px;
}

.device-summary-strip .summary-item strong {
  font-size: 18px;
}

@media (max-width: 980px) {
  .device-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .device-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .device-status-section,
  .device-module-section { margin-bottom: 15px; }

  .section-heading {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .section-live-note { display: none; }

  .device-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .device-hero .hero-main { padding: 15px; }
  .device-hero .readiness-card { min-height: auto; }

  .device-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .device-metrics-grid .indicator {
    min-height: 104px;
    padding: 12px;
  }

  .mode-control-grid { grid-template-columns: 1fr; }

  .device-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .device-controls button {
    min-height: 50px;
    padding: 10px 8px;
  }

  .device-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 370px) {
  .device-metrics-grid,
  .device-summary-strip { grid-template-columns: 1fr; }
  .device-controls { grid-template-columns: 1fr; }
}

/* ASK K.I.S. 6.5.6 — fuel and protected runtime actions */
.resource-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.resource-actions button{min-height:46px;padding:11px 16px;border-radius:14px;font-weight:800}
.fuel-action{background:linear-gradient(135deg,#d89b20,#f0b83f)!important;color:#201300!important;border-color:#f7cb67!important}
.danger-outline{background:rgba(220,68,68,.08)!important;color:#ff9b9b!important;border:1px solid rgba(255,107,107,.46)!important}
.device-action-dialog{width:min(540px,100%)}
.action-field{display:grid;gap:7px;margin:16px 0;font-weight:700;color:#dbe8ff}
.action-field input,.action-field textarea{width:100%;box-sizing:border-box;border:1px solid #345078;border-radius:13px;background:#08162a;color:#fff;padding:12px 13px;font:inherit}
.action-field textarea{min-height:88px;resize:vertical}
.action-dialog-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.action-dialog-buttons button{min-height:44px;border-radius:12px;padding:10px 15px}
@media(max-width:600px){.resource-actions,.action-dialog-buttons{display:grid;grid-template-columns:1fr}.resource-actions button,.action-dialog-buttons button{width:100%}}

.registration-link{width:100%;margin-top:10px;background:transparent!important;border:1px solid rgba(104,151,215,.35)!important;color:#b9d5ff!important;min-height:44px;border-radius:12px}.registration-card{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}.registration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.registration-grid label{display:grid;gap:6px;text-align:left;font-weight:700}.registration-grid input,.registration-grid textarea{width:100%;box-sizing:border-box;border:1px solid #345078;border-radius:12px;background:#08162a;color:#fff;padding:12px}.registration-wide{grid-column:1/-1}.registration-requests-card{grid-column:1/-1}.registration-request{display:grid;grid-template-columns:1.2fr .5fr 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(105,143,196,.22)}.request-devices{display:grid;gap:7px}.request-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}@media(max-width:700px){.registration-grid,.registration-request{grid-template-columns:1fr}.registration-wide,.request-actions{grid-column:auto}.request-actions{display:grid;grid-template-columns:1fr 1fr}}

/* ASK K.I.S. 6.6.1 — integration settings */
.integration-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.integration-settings-card{min-width:0}
.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-form-grid.one-column{grid-template-columns:1fr}
.settings-form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:600;min-width:0}
.settings-form-grid input{width:100%;min-width:0;box-sizing:border-box}
.settings-check{flex-direction:row!important;align-items:center;margin-top:8px}
.settings-check input{width:auto}
.integration-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.integration-save-card{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start}
.integration-save-card .primary{min-width:220px}
@media(max-width:760px){
  .integration-settings-grid{grid-template-columns:1fr}
  .settings-form-grid{grid-template-columns:1fr}
  .integration-save-card{grid-column:auto}
  .integration-actions button,.integration-save-card .primary{width:100%;min-width:0}
}


/* ASK K.I.S. 6.6.2 — account editor */
.account-editor-overlay{position:fixed;inset:0;z-index:10000;background:rgba(2,7,15,.78);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)}
.account-editor{width:min(760px,100%);max-height:92vh;overflow:auto;background:#0b1830;border:1px solid #29466d;border-radius:24px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.account-editor-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #29405f;padding-bottom:14px;margin-bottom:16px}.account-editor-head h3{margin:0}.account-editor-head button{min-width:48px}
.account-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.account-editor-grid label{display:grid;gap:7px}.account-editor-grid input,.account-editor-grid select{width:100%;box-sizing:border-box}.account-active{display:flex!important;align-items:center;gap:10px}.account-active input{width:auto}
.account-device-access{margin-top:18px;padding:16px;border:1px solid #29405f;border-radius:18px}.account-device-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.account-device-list label{display:flex;align-items:center;gap:9px;padding:10px;border-radius:12px;background:rgba(255,255,255,.035)}
.account-editor-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
@media(max-width:640px){.account-editor{padding:16px;border-radius:18px}.account-editor-grid,.account-device-list{grid-template-columns:1fr}.account-editor-actions button{flex:1}}


/* ASK K.I.S. 6.6.3 granular permissions */
.account-permissions{margin-top:18px;padding-top:16px;border-top:1px solid rgba(120,160,220,.22)}
.permission-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.permission-presets{display:flex;gap:8px;flex-wrap:wrap}
.permission-presets button{min-height:38px}
.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.permission-grid label{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid rgba(120,160,220,.22);border-radius:12px;background:rgba(8,24,50,.45)}
.permission-grid input{width:20px;height:20px;flex:0 0 auto}
@media(max-width:760px){.permission-grid{grid-template-columns:1fr}.permission-presets{width:100%}.permission-presets button{flex:1 1 calc(50% - 8px)}}


/* ASK K.I.S. 6.6.4 — user notifications */
.notification-compose-grid{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(260px,1.3fr);gap:14px}
.notification-compose-grid label{display:grid;gap:7px}.notification-compose-grid .compose-message{grid-column:1/-1}.notification-compose-grid textarea{width:100%;resize:vertical;min-height:120px}
.notification-channel-row{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}.notification-channel-row label{display:flex;align-items:center;gap:8px}
.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 14px;border:1px solid var(--line,#284568);border-radius:12px;color:inherit;background:rgba(20,52,92,.55)}
@media(max-width:720px){.notification-compose-grid{grid-template-columns:1fr}.notification-compose-grid .compose-message{grid-column:auto}.notification-channel-row{display:grid;grid-template-columns:1fr 1fr}.admin-notification-card .integration-actions>*{width:100%}}


/* ASK K.I.S. Enterprise 6.6.7 — My Cabinet and role notifications */
.account-profile-enterprise{position:relative;flex-wrap:wrap}.profile-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.account-login{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(148,163,184,.1);color:var(--muted);font-size:12px;font-weight:700}.profile-link-state{margin-left:auto;padding:8px 12px;border:1px solid rgba(245,158,11,.38);border-radius:999px;background:rgba(245,158,11,.08);color:#fbbf24;font-size:12px;font-weight:800}.profile-link-state.is-linked{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.1);color:#4ade80}.profile-info-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:14px}.profile-form-card,.profile-security-card{min-width:0}.profile-status-list{display:grid;gap:2px}.profile-status-list>div{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(148,163,184,.14)}.profile-status-list>div:last-child{border-bottom:0}.profile-status-list span{color:var(--muted)}.profile-status-list strong{overflow-wrap:anywhere;text-align:right}.profile-action-grid button.is-linked{border-color:rgba(34,197,94,.55);background:rgba(22,101,52,.2)}
@media(max-width:900px){.profile-info-grid{grid-template-columns:1fr}.profile-link-state{margin-left:88px}}
@media(max-width:520px){.profile-link-state{width:100%;margin:0;text-align:center}.profile-status-list>div{grid-template-columns:1fr;gap:4px}.profile-status-list strong{text-align:left}.account-profile-enterprise{align-items:flex-start}}

/* ASK K.I.S. — always show clock in Web and Android WebView */
#appHeader #serverClock.clock,
#serverClock.clock {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
  background: rgba(255,255,255,.05);
}

@media (max-width: 600px) {
  #appHeader #serverClock.clock,
  #serverClock.clock {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    font-size: 10px;
    padding: 4px 6px;
    white-space: nowrap;
  }
}

/* ASK K.I.S. — compact dashboard */
.dashboard-health-details {
  margin-top: 14px;
}

.dashboard-health-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 800;
}

.dashboard-health-details > summary::-webkit-details-marker {
  display: none;
}

.dashboard-health-details > summary::after {
  content: "⌄";
  margin-left: auto;
  transition: transform .2s ease;
}

.dashboard-health-details[open] > summary::after {
  transform: rotate(180deg);
}

.dashboard-health-details > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.dashboard-health-details .indicator-grid {
  margin-top: 16px;
}

.attention-toolbar {
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 5;
  padding: 8px 0;
  background: linear-gradient(
    180deg,
    var(--page-bg, #071322) 75%,
    transparent
  );
}

@media (max-width: 700px) {
  .dashboard-health-details > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    font-size: 16px;
  }

  .dashboard-health-details > summary small {
    margin-left: 0;
  }

  .attention-toolbar {
    top: 58px;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 6px;
  }

  .attention-toolbar .filter-btn {
    min-width: 0;
    padding: 9px 6px;
    font-size: 12px;
  }
}

/* =========================================================
   ASK K.I.S. Enterprise — Compact Device UI v1
   ========================================================= */

/* Менші вертикальні проміжки між секціями */
body.device-view #tab-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.device-view #tab-overview .device-module-section,
body.device-view #tab-overview .device-status-section {
  margin: 0;
}

body.device-view #tab-overview .section-heading {
  margin: 0 0 7px;
  min-height: 0;
}

body.device-view #tab-overview .section-heading h2 {
  margin: 1px 0 0;
  font-size: 17px;
  line-height: 1.15;
}

body.device-view #tab-overview .section-kicker {
  font-size: 9px;
  letter-spacing: .12em;
}

body.device-view #tab-overview .section-live-note {
  font-size: 10px;
}

/* Компактний перемикач пристроїв */
body.device-view .device-switcher {
  gap: 7px;
  padding: 7px;
  margin-bottom: 7px;
  border-radius: 12px;
}

body.device-view .device-switcher button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

body.device-view .device-select-wrap {
  min-width: 0;
}

body.device-view .device-select-wrap > span {
  font-size: 9px;
  margin-bottom: 2px;
}

body.device-view #deviceQuickSelect {
  min-height: 34px;
  padding: 5px 30px 5px 9px;
  font-size: 13px;
  border-radius: 9px;
}

body.device-view .device-step-button {
  width: 34px;
  min-width: 34px;
  padding: 0 !important;
  font-size: 20px !important;
}

body.device-view .device-rename-button span {
  display: none;
}

/* Компактні вкладки */
body.device-view .device-tabs {
  gap: 5px;
  padding: 5px;
  margin-bottom: 9px;
  border-radius: 11px;
}

body.device-view .device-tabs button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
  border-radius: 8px;
}

/* Поточний стан */
body.device-view #tab-overview .device-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border-radius: 14px;
}

body.device-view #tab-overview .hero-main {
  min-width: 0;
  padding: 0;
}

body.device-view #tab-overview .hero-main > .muted {
  display: none;
}

body.device-view #tab-overview .hero-state {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.05;
}

body.device-view #tab-overview .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body.device-view #tab-overview .hero-meta .status-badge {
  min-height: 27px;
  padding: 4px 7px;
  font-size: 10px;
  border-radius: 8px;
}

/* Компактна готовність */
body.device-view #tab-overview .readiness-card {
  min-height: 0;
  padding: 9px;
  border-radius: 12px;
}

body.device-view #tab-overview .readiness-card > label {
  font-size: 10px;
  margin-bottom: 4px;
}

body.device-view #tab-overview .readiness-ring {
  width: 72px;
  height: 72px;
  margin: 2px auto;
}

body.device-view #tab-overview .readiness-ring strong {
  font-size: 20px;
}

body.device-view #tab-overview .readiness-card > .muted {
  font-size: 10px;
  line-height: 1.15;
}

body.device-view #tab-overview .readiness-hint {
  display: none;
}

body.device-view #tab-overview .readiness-details {
  top: calc(100% + 6px);
  right: 0;
  width: min(390px, 84vw);
  max-height: 360px;
  overflow: auto;
}

/* Аварія компактніше */
body.device-view #tab-overview .active-fault {
  margin-top: 8px;
  padding: 9px;
  font-size: 11px;
}

/* Плитки показників */
body.device-view #tab-overview .device-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.device-view #tab-overview .device-metrics-grid .indicator {
  min-height: 76px;
  padding: 9px;
  border-radius: 11px;
}

body.device-view #tab-overview .device-metrics-grid .indicator-title {
  gap: 5px;
  font-size: 10px;
}

body.device-view #tab-overview .device-metrics-grid .indicator-value {
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.05;
}

body.device-view #tab-overview .device-metrics-grid .indicator-note {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.15;
}

/* Мнемосхема компактніше */
body.device-view #tab-overview .mnemo-card {
  padding: 10px;
  border-radius: 13px;
}

body.device-view #tab-overview .mnemo-card .section-title {
  margin-bottom: 7px;
}

body.device-view #tab-overview .mnemo-card .section-title h2 {
  font-size: 15px;
}

body.device-view #tab-overview .mnemo {
  min-height: 150px;
  padding: 6px;
  gap: 8px;
}

body.device-view #tab-overview .mnemo-source,
body.device-view #tab-overview .mnemo-gen {
  padding: 8px;
}

body.device-view #tab-overview .mnemo-icon {
  font-size: 25px;
}

body.device-view #tab-overview .mnemo-value {
  margin-top: 4px;
  font-size: 20px;
}

body.device-view #tab-overview .mnemo-label {
  font-size: 10px;
}

body.device-view #tab-overview .mnemo-ats {
  min-width: 84px;
  padding: 10px;
}

/* AUTO / тест */
body.device-view #tab-overview .mode-control-grid {
  gap: 7px;
}

body.device-view #tab-overview .auto-mode-card,
body.device-view #tab-overview #testModeCard {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 11px;
}

body.device-view #tab-overview .auto-mode-card label,
body.device-view #tab-overview #testModeCard label {
  font-size: 10px;
}

body.device-view #tab-overview .auto-mode-card .big,
body.device-view #tab-overview #testModeCard .big {
  font-size: 20px;
}

body.device-view #tab-overview #devAutoHint,
body.device-view #tab-overview #devTestInfo {
  font-size: 9px;
}

/* Кнопки керування */
body.device-view #tab-overview .device-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

body.device-view #tab-overview .device-controls button {
  flex: 1 1 120px;
  min-height: 35px;
  padding: 7px 10px;
  font-size: 11px;
  border-radius: 9px;
}

/* Ресурс та обслуговування */
body.device-view #tab-overview .device-summary-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

body.device-view #tab-overview .device-summary-strip .summary-item {
  min-height: 67px;
  padding: 9px;
  border-radius: 11px;
}

body.device-view #tab-overview .device-summary-strip .summary-item span {
  font-size: 9px;
}

body.device-view #tab-overview .device-summary-strip .summary-item strong {
  margin-top: 5px;
  font-size: 17px;
}

body.device-view #tab-overview .resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

body.device-view #tab-overview .resource-actions button {
  min-height: 35px;
  padding: 7px 11px;
  font-size: 11px;
  border-radius: 9px;
}

/* Планшет */
@media (max-width: 900px) {
  body.device-view #tab-overview .device-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.device-view #tab-overview .device-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Телефон */
@media (max-width: 600px) {
  body.device-view .device-switcher {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px auto;
  }

  body.device-view .device-all-button {
    grid-column: 1 / -1;
    min-height: 30px !important;
  }

  body.device-view .device-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 5px;
  }

  body.device-view .device-tabs::-webkit-scrollbar {
    display: none;
  }

  body.device-view .device-tabs button {
    flex: 0 0 auto;
    min-width: 86px;
  }

  body.device-view #tab-overview .device-hero {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px;
    padding: 9px;
  }

  body.device-view #tab-overview .hero-state {
    font-size: 17px;
  }

  body.device-view #tab-overview .hero-meta {
    gap: 4px;
  }

  body.device-view #tab-overview .hero-meta .status-badge {
    min-height: 23px;
    padding: 3px 5px;
    font-size: 8.5px;
  }

  body.device-view #tab-overview .readiness-ring {
    width: 58px;
    height: 58px;
  }

  body.device-view #tab-overview .readiness-ring strong {
    font-size: 16px;
  }

  body.device-view #tab-overview .device-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.device-view #tab-overview .device-metrics-grid .indicator {
    min-height: 68px;
    padding: 8px;
  }

  body.device-view #tab-overview .device-metrics-grid .indicator-value {
    font-size: 16px;
  }

  body.device-view #tab-overview .mnemo {
    min-height: 130px;
  }

  body.device-view #tab-overview .device-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.device-view #tab-overview .device-controls button {
    width: 100%;
    min-height: 36px;
  }

  body.device-view #tab-overview .device-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.device-view #tab-overview .device-summary-strip .summary-item {
    min-height: 61px;
  }

  body.device-view #tab-overview .resource-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Дуже вузький екран */
@media (max-width: 370px) {
  body.device-view #tab-overview .device-hero {
    grid-template-columns: 1fr;
  }

  body.device-view #tab-overview .readiness-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7px;
  }

  body.device-view #tab-overview .readiness-card > label,
  body.device-view #tab-overview .readiness-card > .muted {
    grid-column: 2;
  }

  body.device-view #tab-overview .readiness-ring {
    grid-row: 1 / 3;
  }
}

/* =========================================================
   ASK K.I.S. Enterprise — Device Overview Layout v2
   ========================================================= */

body.device-view .app-main {
  padding-left: 22px;
  padding-right: 22px;
}

body.device-view .page-top {
  margin-bottom: 8px;
}

body.device-view .page-top h1 {
  font-size: 24px;
  line-height: 1;
}

body.device-view .page-top .muted {
  font-size: 11px;
}

/* Верхня навігація пристрою */
body.device-view #deviceQuickNav {
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 12px;
}

body.device-view .device-switcher {
  display: grid;
  grid-template-columns: auto 38px minmax(260px, 1fr) 38px auto;
  gap: 7px;
  align-items: center;
  padding: 0;
  margin: 0 0 6px;
  border: 0;
  background: transparent;
}

body.device-view .device-all-button,
body.device-view .device-step-button,
body.device-view .device-rename-button {
  min-height: 34px;
  height: 34px;
}

body.device-view .device-select-wrap {
  display: block;
}

body.device-view .device-select-wrap > span {
  display: none;
}

body.device-view #deviceQuickSelect {
  height: 34px;
  min-height: 34px;
  padding: 4px 34px 4px 12px;
  font-size: 13px;
  font-weight: 800;
}

body.device-view .device-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

body.device-view .device-tabs button {
  min-height: 35px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
}

body.device-view .device-tabs button:last-child {
  border-right: 0;
}

body.device-view .device-tabs button.active {
  border-bottom: 2px solid #24d66e;
  background: linear-gradient(
    180deg,
    rgba(34,197,94,.20),
    rgba(34,197,94,.05)
  );
}

/* Загальна щільність огляду */
body.device-view #tab-overview.active {
  display: grid;
  gap: 10px;
}

body.device-view #tab-overview .section-heading {
  display: none;
}

/* Статус */
body.device-view #deviceStatusSection {
  margin: 0;
}

body.device-view #deviceStatusSection .device-hero {
  grid-template-columns: minmax(0,1fr) 170px;
  min-height: 110px;
  padding: 14px 18px;
  border-radius: 12px;
}

body.device-view #deviceStatusSection .hero-main {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  column-gap: 20px;
}

body.device-view #deviceStatusSection .hero-state {
  max-width: 390px;
  margin: 0;
  font-size: clamp(22px,2vw,28px);
}

body.device-view #deviceStatusSection .hero-meta {
  align-items: center;
  gap: 7px;
}

body.device-view #deviceStatusSection .hero-meta .status-badge {
  min-height: 31px;
  padding: 5px 9px;
  font-size: 11px;
}

body.device-view #deviceStatusSection .readiness-card {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.device-view #deviceStatusSection .readiness-ring {
  width: 72px;
  height: 72px;
}

/* Вісім основних показників */
body.device-view #deviceMetricsSection {
  margin: 0;
}

body.device-view #deviceMetricsSection .device-metrics-grid {
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 8px;
}

body.device-view #deviceMetricsSection .indicator {
  min-height: 118px;
  padding: 13px 12px;
  border-radius: 11px;
}

body.device-view #deviceMetricsSection .indicator-title {
  font-size: 11px;
  text-transform: uppercase;
}

body.device-view #deviceMetricsSection .indicator-value {
  margin-top: 11px;
  font-size: 20px;
}

body.device-view #deviceMetricsSection .indicator-note {
  margin-top: 7px;
  font-size: 10px;
}

/* Мнемосхема + керування */
body.device-view .device-operations-row {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.9fr);
  gap: 10px;
  align-items: stretch;
}

body.device-view #deviceMnemoSection,
body.device-view #deviceControlSection {
  margin: 0;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

body.device-view #deviceMnemoSection::before {
  content: "Мнемосхема";
}

body.device-view #deviceControlSection::before {
  content: "Керування";
}

body.device-view #deviceMnemoSection::before,
body.device-view #deviceControlSection::before {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 900;
}

body.device-view #deviceMnemoSection .mnemo-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.device-view #deviceMnemoSection .mnemo-card .section-title {
  margin-bottom: 8px;
}

body.device-view #deviceMnemoSection .mnemo-card .section-title h2 {
  display: none;
}

body.device-view #deviceMnemoSection .mnemo {
  min-height: 155px;
  padding: 4px;
}

body.device-view #deviceControlSection .mode-control-grid {
  display: none;
}

body.device-view #deviceControlSection .device-controls {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 0;
}

body.device-view #deviceControlSection .device-controls button {
  min-height: 43px;
  padding: 8px;
  font-size: 12px;
}

body.device-view #deviceControlSection .device-controls button:nth-child(n+5) {
  min-height: 35px;
  font-size: 10px;
}

/* Ресурс */
body.device-view #deviceResourceSection {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

body.device-view #deviceResourceSection::before {
  content: "Ресурс та обслуговування";
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 900;
}

body.device-view #deviceResourceSection .device-summary-strip {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
}

body.device-view #deviceResourceSection .summary-item {
  min-height: 68px;
  padding: 9px 11px;
}

body.device-view #deviceResourceSection .resource-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

body.device-view #deviceResourceSection .resource-actions button {
  flex: 0 0 auto;
}

/* Планшет */
@media (max-width: 1180px) {
  body.device-view #deviceMetricsSection .device-metrics-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

  body.device-view .device-operations-row {
    grid-template-columns: 1fr;
  }
}

/* Телефон */
@media (max-width: 700px) {
  body.device-view .app-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.device-view .page-top {
    display: none;
  }

  body.device-view #deviceQuickNav {
    padding: 8px;
  }

  body.device-view .device-switcher {
    grid-template-columns: 32px minmax(0,1fr) 32px 38px;
  }

  body.device-view .device-all-button {
    display: none;
  }

  body.device-view .device-step-button {
    width: 32px;
    min-width: 32px;
  }

  body.device-view .device-tabs {
    display: flex;
    overflow-x: auto;
    border-radius: 8px;
  }

  body.device-view .device-tabs button {
    flex: 0 0 96px;
  }

  body.device-view #deviceStatusSection .device-hero {
    grid-template-columns: minmax(0,1fr) 112px;
    min-height: 0;
    padding: 10px;
  }

  body.device-view #deviceStatusSection .hero-main {
    display: block;
  }

  body.device-view #deviceStatusSection .hero-state {
    margin-bottom: 8px;
    font-size: 18px;
  }

  body.device-view #deviceStatusSection .hero-meta {
    gap: 4px;
  }

  body.device-view #deviceStatusSection .hero-meta .status-badge {
    min-height: 24px;
    padding: 3px 5px;
    font-size: 9px;
  }

  body.device-view #deviceMetricsSection .device-metrics-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }

  body.device-view #deviceMetricsSection .indicator {
    min-height: 88px;
    padding: 10px;
  }

  body.device-view .device-operations-row {
    display: block;
  }

  body.device-view #deviceMnemoSection,
  body.device-view #deviceControlSection {
    margin-bottom: 10px;
    padding: 11px;
  }

  body.device-view #deviceMnemoSection .mnemo {
    min-height: 210px;
  }

  body.device-view #deviceResourceSection .device-summary-strip {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  body.device-view #deviceResourceSection .resource-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.device-view #deviceResourceSection .resource-actions button {
    width: 100%;
  }
}

/* v6.7.0 Push controls */
.push-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 18px;
}
@media (max-width: 700px) {
  .push-settings-card { align-items: stretch; flex-direction: column; }
  .push-settings-card .cal-actions { display: grid; grid-template-columns: 1fr 1fr; }
}


/* v6.8.0 Calendar */
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.calendar-toolbar>div{display:flex;gap:7px}.calendar-toolbar h2{margin:0;text-transform:capitalize}.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.calendar-board{overflow:auto}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr))}.calendar-weekdays span{text-align:center;padding:8px;font-weight:700;color:var(--muted)}.calendar-day{min-height:118px;border:1px solid rgba(148,163,184,.14);padding:7px;background:rgba(2,8,18,.24)}.calendar-day.outside{opacity:.42}.calendar-day.today{box-shadow:inset 0 0 0 2px rgba(34,211,238,.7)}.calendar-day-number{font-weight:800;margin-bottom:5px}.calendar-event{display:block;width:100%;border:0;border-left:3px solid #38bdf8;background:rgba(56,189,248,.13);color:inherit;text-align:left;padding:4px 5px;margin:3px 0;border-radius:5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.important,.calendar-agenda-item.important{border-color:#f59e0b}.calendar-event.critical,.calendar-agenda-item.critical{border-color:#ef4444}.calendar-event.done,.calendar-agenda-item.done{opacity:.55;text-decoration:line-through}.calendar-agenda{align-self:start;max-height:680px;overflow:auto}.calendar-agenda-list{display:grid;gap:8px}.calendar-agenda-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border-left:4px solid #38bdf8;background:rgba(148,163,184,.08);padding:9px;border-radius:7px;cursor:pointer}.calendar-agenda-item small{display:block;color:var(--muted);margin-top:4px}.calendar-modal-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:15px}.calendar-modal{width:min(720px,100%);max-height:92vh;overflow:auto}.calendar-modal-head{display:flex;align-items:center;justify-content:space-between}.calendar-modal label{display:grid;gap:6px;margin:10px 0}.calendar-modal textarea{resize:vertical}.calendar-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.small{font-size:11px}@media(max-width:900px){.calendar-layout{grid-template-columns:1fr}.calendar-agenda{max-height:none}}@media(max-width:650px){.calendar-toolbar{align-items:stretch;flex-wrap:wrap}.calendar-toolbar h2{order:-1;width:100%;text-align:center}.calendar-weekdays,.calendar-grid{grid-template-columns:repeat(7,minmax(76px,1fr))}.calendar-day{min-height:92px;padding:4px}.calendar-event{font-size:9px}.calendar-form-grid{grid-template-columns:1fr}}

/* Clickable header indicators */
.system-chip-link {
  position: relative;
  appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    transform .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.system-chip-link:hover,
.system-chip-link:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 1px rgba(96,165,250,.28);
  outline: none;
}

.system-chip-link:active {
  transform: translateY(0);
}

.system-chip-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 3000;
  min-width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid rgba(96,165,250,.35);
  border-radius: 8px;
  background: #071426;
  color: #e7f1ff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 10px 30px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;
}

.system-chip-link:hover .system-chip-tooltip,
.system-chip-link:focus-visible .system-chip-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 700px) {
  .system-chip-tooltip {
    display: none;
  }
}