/* Owner/Admin responsive structure. Customer and modal shell rules are separate.
   Keep this after the component and theme styles: no data/control behavior here. */
#app-view .workspace,
#app-view main,
#app-view main > section,
#app-view .card,
#app-view .table-wrap { min-width: 0; max-width: 100%; }
#app-view :is(label, .form-grid > *, .owner-grid > *, .page-heading > *, .button-row > *) { min-width: 0; }
#app-view :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; }
#app-view .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app-view .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#app-view :is(.page-heading, .site-heading, .button-row) { flex-wrap: wrap; }
#app-view :is(.page-heading h1, .site-heading h2, .owner-site-summary h2, .aw-card-heading h2,
  .aw-install-device-location > span, .branch-account-current > div, .provider-package > div,
  .payment-provider-footer > p, .sj-detail-summary b, .sj-reference) { overflow-wrap: anywhere; }
#app-view .button { white-space: normal; text-align: center; }
#app-view .table-wrap .button { min-height: 44px; }
#app-view .aw-search { min-width: 0; }
#app-view .aw-install-scope > label { min-width: 0; }
#app-view :is(.fleet-filters, .customer-report-filters, .sj-filters, .sj-support-filters,
  .report-equipment-fields, .tariff-list-filters, .shared-provider-body) > * { min-width: 0; }
#app-view .fleet-device :is(b, p),
#app-view .tariff-device-card :is(h3, p, strong),
#app-view .tariff-selected-device :is(h3, p, b) { overflow-wrap: anywhere; }
#app-view .branch-account-current > div { flex: 1; min-width: 0; }
#app-view .provider-package > div { flex-wrap: wrap; }
#app-view .provider-package > div > * { min-width: 0; }
#app-view .aw-pagination > span,
#app-view .fleet-pagination > span { white-space: normal; text-align: center; }

/* Device list markup groups the essentials; serial/last-seen/photo provenance
   remain available in the explicit details disclosure, never truncated data. */
#app-view .device-row:has(> .device-identity) {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
}
#app-view .device-row > .device-identity { min-width: 0; }
#app-view .device-identity strong { display: block; overflow-wrap: anywhere; font-size: 17px; line-height: 1.5; }
#app-view .device-identity small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#app-view .device-row > .charger-visual { width: 72px; min-width: 0; grid-row: 1 / 3; }
#app-view .device-row > .device-state { justify-self: end; font-size: 12px; max-width: 100%; white-space: normal; }
#app-view .device-facts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; line-height: 1.6; }
#app-view .device-facts > span { min-width: 0; overflow-wrap: anywhere; }
#app-view .device-details { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); }
#app-view .device-details > summary,
#app-view .device-action-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; line-height: 1.6; }
#app-view .device-details > summary::-webkit-details-marker,
#app-view .device-action-menu > summary::-webkit-details-marker { display: none; }
#app-view .device-details > summary::after,
#app-view .device-action-menu > summary::after { content: '⌄'; font-size: 18px; }
#app-view .device-details[open] > summary::after,
#app-view .device-action-menu[open] > summary::after { content: '⌃'; }
#app-view .device-details dl { display: grid; grid-template-columns: minmax(80px, .45fr) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; font-size: 14px; line-height: 1.7; }
#app-view .device-details dt { color: var(--muted); }
#app-view .device-details dd { margin: 0; overflow-wrap: anywhere; }
#app-view .device-photo-note { margin: 8px 0 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }
#app-view .device-row > .device-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin: 0; }
#app-view .device-action-menu { min-width: 150px; }
#app-view .device-action-menu > summary { padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
#app-view .device-action-menu > .button { display: flex; width: 100%; margin-top: 8px; }

/* Sidebar leaves considerably less room than viewport width suggests on iPad. */
@media (min-width: 701px) and (max-width: 1100px) {
  #app-view :is(.aw-business-layout, .aw-install-pane, .aw-guide-layout) { grid-template-columns: minmax(0, 1fr); }
  #app-view :is(.aw-user-list, .aw-business-list, #fleet-list, #revenue-point-list) { grid-template-columns: minmax(0, 1fr); }
  #app-view .aw-guide-topics { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-view .aw-install-scope { align-items: stretch; }
  #app-view .aw-install-scope > label { flex-basis: 100%; max-width: none; }
  #app-view .aw-install-scope > p { margin-top: 0; }
  #app-view .report-equipment-fields { grid-template-columns: minmax(0, 1fr); }
  #app-view .customer-report-filters { grid-template-columns: minmax(0, 1fr); }
  #app-view .customer-report-filters .button { width: 100%; min-width: 0; }
  #app-view .customer-report-search { grid-column: auto; }
  #app-view .aw-guide-context { grid-template-columns: minmax(0, 1fr); }
  #app-view .aw-guide-content { min-height: 0; }
}

@media (max-width: 700px) {
  #app-view main { padding-inline: 14px; }
  #app-view .page-heading { align-items: stretch; gap: 12px; margin-bottom: 18px; }
  #app-view .page-heading > :is(.button, .button-row) { max-width: 100%; }
  #app-view .page-heading h1 { font-size: 27px; line-height: 1.45; }
  #app-view .page-heading p { font-size: 14px; line-height: 1.7; }
  #app-view :is(.aw-roster-panel, .aw-form, .aw-connection-card, .aw-verify-card,
    .aw-guide-context, .aw-guide-content, .aw-guide-environment, .settings-card,
    .tariff-inventory, .report-filter, .revenue-breakdown, .report-wallet) { padding: 18px 14px; }
  #app-view .form-grid { grid-template-columns: minmax(0, 1fr); }
  #app-view .button { min-height: 44px; line-height: 1.5; }
  #app-view :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
  #app-view :is(.aw-search, .aw-section-heading > .aw-search) { width: 100%; min-width: 0; }
  #app-view .aw-section-heading { flex-wrap: wrap; align-items: stretch; gap: 12px; }
  #app-view .aw-account-row { flex-wrap: wrap; }
  #app-view .aw-account-row > .button { margin-left: 48px; }
  #app-view .aw-account-name { flex-basis: calc(100% - 52px); }
  #app-view .aw-overview-card { grid-template-columns: minmax(0, 1fr); }
  #app-view .aw-explain-row { flex-direction: row; padding-block: 12px; }
  #app-view .aw-explain-row > div { min-width: 0; }
  #app-view .aw-install-scope { padding: 16px 14px; }
  #app-view .aw-journey > button { min-width: 0; }
  #app-view .aw-journey > button small { white-space: normal; text-wrap: balance; font-size: 12px; line-height: 1.5; }
  #app-view .aw-install-device { padding: 0 12px; margin-top: 10px; }
  #app-view .aw-install-device-location { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; }
  #app-view .aw-install-device-location > span { flex: 1 1 150px; min-width: 0; font-size: 12px; }
  #app-view .aw-install-device-location > .button { min-height: 44px; margin-left: auto; padding: 8px 10px; font-size: 13px; }
  #app-view .aw-install-device .device-row { padding-block: 12px; }
  #app-view .device-row:has(> .device-identity) { grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 6px 12px; }
  #app-view .device-row > .charger-visual { grid-column: 1; grid-row: 1 / 3; width: 52px; margin: 0; }
  #app-view .device-row:has(> .device-identity) > .charger-visual .charger-image-frame { height: 64px; border-radius: 9px; }
  #app-view .device-row:has(> .device-identity) > .charger-visual img { height: 100%; padding: 4px; }
  #app-view .device-row:has(> .device-identity) > .charger-visual .charger-product-image { padding: 0; }
  #app-view .device-row:has(> .device-identity) > .charger-visual figcaption { display: none; }
  #app-view .device-row > .device-identity { grid-column: 2; }
  #app-view .device-identity strong { font-size: 16px; line-height: 1.5; }
  #app-view .device-identity small { font-size: 13px; line-height: 1.5; margin-top: 1px; }
  #app-view .device-row > .device-state { grid-column: 2; justify-self: start; margin: 0; padding: 3px 7px; font-size: 12px; line-height: 1.5; }
  #app-view .device-facts { grid-column: 1 / -1; gap: 4px 14px; padding-block: 3px; font-size: 14px; }
  #app-view .device-details > summary { font-size: 14px; }
  #app-view .device-details dl { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 14px; }
  #app-view .device-details dd { margin-bottom: 7px; }
  #app-view .device-row > .device-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; gap: 8px; }
  #app-view .device-row .device-actions > .button,
  #app-view .device-row .device-action-menu > summary { min-width: 0; width: 100%; min-height: 44px; font-size: 14px; padding: 9px 8px; line-height: 1.5; }
  #app-view .device-row .device-action-menu { min-width: 0; }
  #app-view .device-row .device-action-menu[open] { grid-column: 1 / -1; }
  #app-view .device-row .device-action-menu > .button { font-size: 14px; min-height: 44px; }
  #app-view .fleet-device { padding: 16px 14px; }
  #app-view .fleet-equipment-heading { gap: 12px; align-items: start; }
  #app-view .fleet-equipment-heading > .charger-visual { width: 56px; flex-basis: 56px; }
  #app-view .fleet-equipment-heading .charger-image-frame { height: 68px; }
  #app-view .fleet-equipment-heading .charger-visual figcaption { font-size: 11px; }
  #app-view .fleet-equipment-title { gap: 6px; }
  #app-view .fleet-equipment-title b { font-size: 16px; line-height: 1.5; }
  #app-view .fleet-device p { margin-block: 6px; font-size: 14px; }
  #app-view .fleet-device > .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #app-view .fleet-device .button-row > .button:first-child { grid-column: 1 / -1; }
  #app-view .fleet-device .button { min-height: 44px; font-size: 14px; padding: 9px 10px; }
  #app-view .tariff-device-card { padding: 14px; gap: 12px; align-items: start; }
  #app-view .tariff-device-card > .charger-visual { width: 56px; flex-basis: 56px; }
  #app-view .tariff-device-card .charger-image-frame { height: 68px; }
  #app-view .tariff-device-card h3 { font-size: 16px; line-height: 1.5; }
  #app-view .tariff-device-card strong { font-size: 21px; line-height: 1.6; }
  #app-view .tariff-device-card .button { min-height: 44px; font-size: 14px; }
  #app-view .sj-card-heading > span:nth-child(2) { min-width: 0; flex-basis: calc(100% - 48px); }
  #app-view .sj-card-heading > .sj-badge { margin-left: 47px; max-width: calc(100% - 47px); white-space: normal; }
  #app-view .sj-card { padding: 16px 14px; }
  #app-view :is(.sj-filters, .sj-support-filters) { padding: 16px 14px; }
  #app-view .payment-provider-heading > div { min-width: 0; }
  #app-view .payment-provider-footer > p { min-width: 0; flex-basis: calc(100% - 42px); }
  #app-view .branch-account-row .pill { white-space: normal; }
  #app-view .customer-report-metrics { gap: 10px; }
  #app-view .customer-report-metrics .customer-metric { padding: 14px 12px; }
  #app-view .customer-metric > span { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  #app-view main { padding-inline: 12px; }
  #app-view .fleet-filters { grid-template-columns: minmax(0, 1fr); }
  #app-view .fleet-filters > .button { width: 100%; }
  #app-view .sj-support-filters { grid-template-columns: minmax(0, 1fr); }
  #app-view .sj-support-filters > label:first-child { grid-column: auto; }
  #app-view :is(.aw-pagination, .fleet-pagination) { gap: 6px; flex-wrap: wrap; }
  #app-view :is(.aw-pagination, .fleet-pagination) > .button { font-size: 14px; padding-inline: 10px; }
  #app-view .payment-settings-journey { gap: 5px; }
  #app-view .payment-settings-journey span { font-size: 13px; }
}