/**
 * Read-only iframe embed layout (?view=1&embed=1).
 * Loaded after style.css on embed routes only.
 */

html.equipment-embed,
body.equipment-embed {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0f172a;
}

body.equipment-embed {
  padding-bottom: 56px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Contain layout inside the iframe — no 100vw breakout */
body.equipment-embed .equipment-app-full-width,
body.equipment-embed #equipment-list-app {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

body.equipment-embed.el-equipment-page-shell {
  --el-theme-header-height: 0px;
  --el-sidebar-width: 96px;
  --el-content-padding-x: 12px;
  --el-app-height: calc(100vh - 56px);
  --el-app-height: calc(100dvh - 56px);
}

@media (min-width: 769px) {
  body.equipment-embed.el-equipment-page-shell #equipment-list-app {
    padding-left: calc(var(--el-sidebar-width) + var(--el-content-padding-x)) !important;
    padding-right: var(--el-content-padding-x) !important;
    min-height: var(--el-app-height) !important;
  }

  body.equipment-embed.el-equipment-page-shell #equipment-list-app .left-sidebar {
    top: 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
  }

  body.equipment-embed.el-equipment-page-shell #equipment-list-app .container,
  body.equipment-embed.el-equipment-page-shell #equipment-list-app .card,
  body.equipment-embed.el-equipment-page-shell #equipment-list-app .app-layout,
  body.equipment-embed.el-equipment-page-shell #equipment-list-app .equipment-main-column {
    min-height: var(--el-app-height) !important;
  }

  body.equipment-embed.el-equipment-page-shell #equipment-list-app .equipment-main-column > header,
  body.equipment-embed.el-equipment-page-shell #equipment-list-app header {
    padding-top: 10px !important;
  }
}

@media (max-width: 768px) {
  body.equipment-embed.el-equipment-page-shell {
    padding-left: 0 !important;
  }

  body.equipment-embed #equipment-list-app {
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
  }

  body.equipment-embed .equipment-embed-footer__inner {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Read-only embed chrome: browse-only UI */
body.equipment-embed .share-button-wrapper,
body.equipment-embed #saveBtn,
body.equipment-embed #saveReminderBanner,
body.equipment-embed #generateAnalysisBtn,
body.equipment-embed #settingsBtn,
body.equipment-embed #downloadBtn,
body.equipment-embed #demoTourFab,
body.equipment-embed .equip-demo-fab,
body.equipment-embed .equip-demo-welcome-message,
body.equipment-embed .equip-demo-overlay,
body.equipment-embed .equip-use-template-fab,
body.equipment-embed #equipUseTemplateModal,
body.equipment-embed .tutorial-overlay,
body.equipment-embed .tutorial-tooltip,
body.equipment-embed .el-rec-fab,
body.equipment-embed .el-wish-fab-group,
body.equipment-embed #setupToggleBtn,
body.equipment-embed #setupRowContent,
body.equipment-embed .school-name-inline button,
body.equipment-embed #sidebarBtnFAQ,
body.equipment-embed #sidebarBtnContact,
body.equipment-embed #sidebarBtnRecommendations,
body.equipment-embed #sidebarRecommendationsPanel,
body.equipment-embed #sidebarFAQPanel,
body.equipment-embed #sidebarContactPanel,
body.equipment-embed .inventory-create-btn-inline,
body.equipment-embed .needs-create-btn-inline,
body.equipment-embed .inventory-delete-btn,
body.equipment-embed .needs-delete-all-btn,
body.equipment-embed .drag-handle-cell,
body.equipment-embed .drag-handle,
body.equipment-embed .inventory-actions-cell,
body.equipment-embed .needs-actions-cell,
body.equipment-embed .edit-target-btn,
body.equipment-embed .action-add-to-needs-btn {
  display: none !important;
}

body.equipment-embed #myList .inventory-table-row td.drag-handle-cell,
body.equipment-embed #myList .inventory-table-row td.inventory-actions-cell,
body.equipment-embed #needsList .needs-table-row td.drag-handle-cell,
body.equipment-embed #needsList .needs-table-row td.needs-actions-cell {
  display: none !important;
}

body.equipment-embed #myList .inventory-table-header,
body.equipment-embed #needsList .inventory-table-header {
  display: table-header-group !important;
}

body.equipment-embed #myList .inventory-table-header th,
body.equipment-embed #needsList .inventory-table-header th {
  display: table-cell !important;
}

/* Embed builds a 4-column header (Item / On hand / Target / Inventory Levels).
   Read-only rules hide first+last th for drag/action columns — undo that in embed. */
body.equipment-embed.equipment-readonly #myList .inventory-table-header th:first-child,
body.equipment-embed.equipment-readonly #myList .inventory-table-header th:last-child,
body.equipment-embed.equipment-readonly #needsList .inventory-table-header th:first-child,
body.equipment-embed.equipment-readonly #needsList .inventory-table-header th:last-child {
  display: table-cell !important;
}

@media (max-width: 768px) {
  /* Mobile inventory rules assume a 6-column table; embed uses 4 header columns. */
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(1),
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(2),
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(3),
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(4),
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(5),
  body.equipment-embed #equipment-list-app .inventory-table-header th:nth-child(6) {
    display: table-cell !important;
  }

  body.equipment-embed #equipment-list-app #myList .inventory-table-row td:nth-child(4),
  body.equipment-embed #equipment-list-app #needsList .needs-table-row td:nth-child(4) {
    display: table-cell !important;
  }
}

body.equipment-embed .inventory-name-cell input,
body.equipment-embed .needs-name-line input,
body.equipment-embed .items-owned-cell input,
body.equipment-embed .needs-qty-cell input,
body.equipment-embed #schoolName,
body.equipment-embed #teacherName,
body.equipment-embed #averageClassSizeInline {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.equipment-embed .inventory-search-input,
body.equipment-embed .needs-search-input {
  pointer-events: auto !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
}

body.equipment-embed #setupSummary {
  display: block !important;
  margin: 0 0 8px;
  color: #64748b;
  font-size: 14px;
}

body.equipment-embed #equipment-list-app header .page-header {
  align-items: flex-start;
}

body.equipment-embed #equipment-list-app .inventory-table-wrapper,
body.equipment-embed #equipment-list-app #myList,
body.equipment-embed #equipment-list-app #needsList {
  max-width: 100%;
}

body.equipment-embed .equipment-embed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
}

/* Embed: flat equipment rows only — no category accordion bands */
body.equipment-embed #myList tr.category-header-row,
body.equipment-embed #needsList tr.category-header-row,
body.equipment-embed #essentialList tr.category-header-row,
body.equipment-embed #sidebarRecommendationsPanel tr.category-header-row,
body.equipment-embed .sidebar-wish-catalog-panel tr.category-header-row,
body.equipment-embed tr.essential-gap-after-category,
body.equipment-embed tr.wish-catalog-gap-after-category {
  display: none !important;
}

body.equipment-embed #myList .inventory-table-row,
body.equipment-embed #needsList .needs-table-row,
body.equipment-embed #essentialList tr.wish-catalog-card-shell,
body.equipment-embed #essentialList tr.inventory-table-row {
  display: table-row !important;
}

body.equipment-embed #equipmentAppLayout.recommendations-expanded .equipment-main-column {
  width: 100% !important;
  max-width: 100% !important;
}

body.equipment-embed .inventory-controls-container,
body.equipment-embed .needs-search-container {
  display: none !important;
}

body.equipment-embed .inventory-controls-container .inventory-filter-btn-inline,
body.equipment-embed .inventory-controls-container .inventory-control-pill {
  display: none !important;
}

/* Embed footer: download + CTA */
body.equipment-embed .equipment-embed-footer__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.equipment-embed .equipment-embed-download {
  position: relative;
}

body.equipment-embed .equipment-embed-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

body.equipment-embed .equipment-embed-footer__btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

body.equipment-embed .equipment-embed-download__menu {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 180px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 10060;
}

body.equipment-embed .equipment-embed-download__menu.is-open {
  display: block;
}

body.equipment-embed .equipment-embed-download__menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

body.equipment-embed .equipment-embed-download__menu button:hover {
  background: #f1f5f9;
}