/* TelecomSIP Connect — settings layout refinement for wide desktops. */

/* Browser-Phone loads phone.dark.css dynamically and it sets body to #222.
   Keep the Connect application canvas authoritative while Settings is open. */
html:has(#settings-view:not([hidden])),
body:has(#settings-view:not([hidden])),
body:has(#settings-view:not([hidden])) .connect-shell {
  background: var(--color-bg) !important;
}

body:has(#settings-view:not([hidden])) {
  min-height: 100dvh !important;
}

#settings-view .settings-list {
  width: min(1540px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 28px;
}

#settings-view .setting-row {
  grid-template-columns: 44px minmax(0, 1fr) minmax(320px, 520px);
  gap: 20px;
}

@media (max-width: 800px) {
  #settings-view .settings-list {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 18px;
  }

  #settings-view .setting-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }
}