/* Wide workspace -----------------------------------------------------------
   Loaded after the main theme so high-resolution layout rules are final. */
@media (min-width: 1600px) {
  main {
    --desktop-gutter: clamp(32px, 2.35vw, 64px);
    padding-inline: var(--desktop-gutter);
  }

  .page-header {
    margin-inline: calc(-1 * var(--desktop-gutter));
    padding-inline: var(--desktop-gutter);
  }

  .page > .panel,
  .page > .operator-layout,
  .page > .operator-steps,
  .page > .active-card,
  .page > .admin-layout,
  .page > .system-settings-layout,
  .users-panel,
  .devices-panel,
  .ozon-archive-panel,
  .system-settings-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  #operator-page .incident-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #operator-page .incident-form > .field:not(.full-width) {
    grid-column: span 3;
  }

  #operator-page .incident-form > #zone-camera-readiness {
    grid-column: span 8;
    min-height: 74px;
    align-content: center;
  }

  #operator-page .incident-form > .field.full-width {
    grid-column: span 4;
  }

  #operator-page .incident-form > .advanced-fields,
  #operator-page .incident-form > .primary-action {
    grid-column: 1 / -1;
  }

  #operator-page .advanced-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #operator-page .advanced-grid > .field.full-width {
    grid-column: 1 / -1;
  }

  #operator-page .active-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operator-page .active-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns:
      minmax(300px, 1.55fr)
      minmax(220px, 1fr)
      minmax(150px, .72fr)
      112px
      126px
      154px
      140px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  .camera-device-head,
  .camera-device-row {
    grid-template-columns:
      minmax(320px, 1.65fr)
      minmax(230px, 1.1fr)
      minmax(180px, .85fr)
      minmax(180px, .85fr)
      110px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  .zone-device-head,
  .zone-device-row {
    grid-template-columns:
      minmax(320px, 1.45fr)
      minmax(300px, 1.25fr)
      110px
      110px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  .user-table-head,
  .unifi-user-list .user-item {
    grid-template-columns:
      minmax(320px, 1.5fr)
      minmax(220px, 1fr)
      minmax(220px, 1fr)
      120px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  #network-settings-section {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0 clamp(22px, 2vw, 38px);
    align-items: start;
  }

  #network-settings-section > .panel-heading {
    grid-column: 1 / -1;
  }

  #network-settings-section > .access-address-card {
    grid-column: 1 / span 4;
    grid-row: 2;
    margin-bottom: 0;
  }

  #network-settings-section > #network-settings-form {
    grid-column: 5 / -1;
    grid-row: 2 / span 2;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #network-settings-form > .field.full-width {
    grid-column: span 4;
  }

  #network-settings-form > .dns-credential-fields,
  #network-settings-form > .secret-note,
  #network-settings-form > .tls-progress,
  #network-settings-form > .settings-warning,
  #network-settings-form > .network-actions {
    grid-column: 1 / -1;
  }

  #network-settings-section > .certificate-state {
    grid-column: 1 / span 4;
    grid-row: 3;
  }

  #storage-settings-section > #system-settings-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #system-settings-form > .toggle.full-width {
    grid-column: span 6;
  }

  #system-settings-form > .field {
    grid-column: span 3;
  }

  #system-settings-form > .settings-warning.full-width {
    grid-column: span 8;
  }

  #system-settings-form > .primary-action.full-width {
    grid-column: span 4;
    align-self: center;
  }
}

@media (min-width: 2400px) {
  main {
    --desktop-gutter: clamp(48px, 2.6vw, 76px);
  }

  .panel {
    padding: clamp(18px, 1vw, 26px);
  }

  .archive-toolbar,
  .device-list-toolbar,
  .entity-list-toolbar {
    min-height: 62px;
  }
}

/* Mobile archive -----------------------------------------------------------
   The row is a compact arbitr card. Explicit areas prevent legacy status
   rules from creating implicit grid rows on iPhone-sized viewports. */
@media (max-width: 760px) {
  #incidents-page .incident-row,
  body.role-operator #incidents-page .incident-row {
    min-height: 0;
    padding: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main record"
      "zone review"
      "duration review";
    gap: 6px 10px;
    align-items: center;
  }

  #incidents-page .incident-main {
    grid-area: main;
    min-width: 0;
  }

  #incidents-page .incident-zone {
    grid-area: zone;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #incidents-page .incident-duration {
    grid-area: duration;
    min-width: 0;
  }

  #incidents-page .incident-record-status {
    grid-area: record;
    align-self: center;
    justify-self: end;
  }

  #incidents-page .incident-review-status {
    grid-area: review;
    align-self: center;
    justify-self: end;
    max-width: 128px;
    text-align: center;
    white-space: normal;
  }

  #incidents-page .incident-actions {
    display: none;
  }
}

@media (max-width: 360px) {
  #incidents-page .incident-row,
  body.role-operator #incidents-page .incident-row {
    padding-inline: 10px;
    column-gap: 7px;
  }

  #incidents-page .incident-review-status {
    max-width: 104px;
    padding-inline: 6px;
  }
}

@media (min-width: 361px) and (max-width: 430px) {
  .archive-page-header h1 {
    max-width: none;
  }

  .browser-compatibility.limited strong,
  .browser-compatibility.unsupported strong {
    font-size: 0;
  }

  .browser-compatibility.limited strong::after {
    content: "Ограничено";
    font-size: 9px;
  }

  .browser-compatibility.unsupported strong::after {
    content: "Нужен Яндекс";
    font-size: 9px;
  }
}

/* Compact camera readiness -------------------------------------------------
   Informational status stays glanceable and does not dominate the form. */
.camera-readiness,
.camera-readiness.ready {
  min-height: 44px;
  padding: 7px 9px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 5px;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
}

.camera-readiness.warning,
.camera-readiness.empty {
  border: 0;
  background: var(--warning-soft);
}

#operator-page .incident-form > #zone-camera-readiness {
  min-height: 44px;
  align-content: initial;
}

.readiness-icon,
.readiness-spinner {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
}

.readiness-icon {
  color: var(--success-text);
  background: var(--success-soft);
}

.warning .readiness-icon,
.empty .readiness-icon {
  color: var(--warning-text);
  background: color-mix(in srgb, var(--warning-solid) 13%, transparent);
}

.readiness-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.readiness-body {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.readiness-summary {
  min-width: max-content;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.camera-readiness .readiness-summary strong {
  font-size: 11px;
  font-weight: 650;
}

.camera-readiness .readiness-summary small {
  margin: 0;
  font-size: 8px;
}

.readiness-cameras {
  min-width: 0;
  flex: 1;
  margin-top: 0;
  gap: 4px;
}

.readiness-camera {
  max-width: 240px;
  min-height: 24px;
  padding: 4px 8px;
  gap: 0;
  border-radius: 6px;
  color: var(--success-text);
  background: var(--success-soft);
  font-size: 9px;
  font-weight: 600;
}

.readiness-camera-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readiness-camera b {
  flex: 0 0 auto;
  font: inherit;
}

.readiness-camera b::before {
  content: "·";
  margin: 0 5px;
}

.readiness-camera.warning,
.readiness-camera.inactive {
  color: var(--danger-text);
  background: var(--danger-soft);
}

@media (max-width: 760px) {
  .readiness-body {
    display: grid;
    gap: 5px;
  }

  .readiness-cameras {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .readiness-camera {
    max-width: min(190px, 68vw);
    flex: 0 0 auto;
  }
}