/* Final desktop security dashboard grid: the fixed-size frame has two tile rows. */
@media (min-width: 901px) {
  .security-status-view.is-visible {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: 1.1rem !important;
    padding: 1.5rem !important;
  }

  .security-status-card {
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Center the five remaining sensors beneath the six-card first row. */
  .security-status-view.is-visible > .security-status-card:nth-child(8) {
    grid-column-start: 2;
  }
}

/* Tablet and phone: the security view becomes normal document flow so the
   fixed desktop panel never clips or scrolls over its own square cards. */
@media (max-width: 900px) {
  .smart-home-demo.security-mode .home-plan {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .smart-home-demo.security-mode .security-status-view.is-visible {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: .8rem !important;
    padding: 1rem !important;
    overflow: visible !important;
  }

  .security-status-card {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 680px) {
  .smart-home-demo.security-mode .security-status-view.is-visible {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
    padding: .75rem !important;
  }

  .security-status-card { padding: .85rem !important; }
}

@media (max-width: 390px) {
  .smart-home-demo.security-mode .security-status-view.is-visible {
    grid-template-columns: 1fr !important;
  }
}