/* Portal add-on for the Archi HTML report: search box and phone layout. */

/* Let the results list hang below the header instead of being cut off */
.ui-layout-north { overflow: visible !important; z-index: 1000 !important; }

/* Search box in the top right corner of the navbar */
.pa-search {
  position: absolute;
  top: 6px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 1000;
}
.pa-filter,
.pa-input {
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 8px;
  background: #fff;
  color: #333;
}
.pa-input { width: 260px; }
.pa-results {
  display: none;
  position: absolute;
  top: 36px;
  right: 0;
  width: 420px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.pa-open .pa-results { display: block; }
.pa-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  color: #333;
}
.pa-item:hover { background: #eef5fb; }
.pa-name { font-weight: bold; }
.pa-where { width: 100%; font-size: 12px; color: #777; }
.pa-empty { padding: 8px 12px; color: #777; }
.pa-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
  background: #777;
}
.pa-view { background: #008cba; }
.pa-element { background: #43ac6a; }
.pa-relationship { background: #e99002; }

/* Tab bar for phones, hidden on bigger screens */
.pa-tabs { display: none; }

/* Phone layout: one pane at a time */
body.pa-mobile .ui-layout-resizer,
body.pa-mobile .ui-layout-toggler,
body.pa-mobile .navbar-collapse,
body.pa-mobile .navbar-toggle { display: none !important; }

body.pa-mobile .ui-layout-north {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 10 !important;
  overflow: visible !important;
}
body.pa-mobile .ui-layout-north .navbar { margin: 0; min-height: 0; }
body.pa-mobile .navbar-brand {
  float: none;
  display: block;
  height: auto;
  padding: 8px 12px 4px;
  font-size: 16px;
}
body.pa-mobile .pa-search {
  position: relative;
  top: 0;
  right: 0;
  padding: 0 8px 8px;
}
body.pa-mobile .pa-input { flex: 1; width: auto; min-width: 0; font-size: 16px; }
body.pa-mobile .pa-filter { font-size: 16px; }
body.pa-mobile .pa-results {
  top: 40px;
  left: 8px;
  right: 8px;
  width: auto;
}

/* Every pane sits between the header and the tab bar (56px).
   Hidden panes use visibility, not display: none, so Archi can still
   measure the diagram size for the zoom slider. */
body.pa-mobile iframe[name=view],
body.pa-mobile .ui-layout-west {
  position: fixed !important;
  top: 88px !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100vh - 144px) !important;
  height: calc(100dvh - 144px) !important;
  display: block !important;
  visibility: hidden !important;
}
body.pa-mobile .ui-layout-west .ui-layout-center,
body.pa-mobile .ui-layout-west iframe[name=element] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: hidden !important;
}
body.pa-mobile .ui-layout-west .ui-layout-center {
  overflow-y: auto !important;
  background: #fff !important;
}
body.pa-mobile .root-panel {
  min-height: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
}
body.pa-mobile .root-panel,
body.pa-mobile .root-panel-body { height: auto !important; max-height: none !important; }

body.pa-mobile[data-pa-pane=tree] .ui-layout-west,
body.pa-mobile[data-pa-pane=details] .ui-layout-west,
body.pa-mobile[data-pa-pane=tree] .ui-layout-west .ui-layout-center,
body.pa-mobile[data-pa-pane=details] .ui-layout-west iframe[name=element],
body.pa-mobile[data-pa-pane=view] iframe[name=view] { visibility: visible !important; }

body.pa-mobile .ui-layout-west .tree a { display: inline-block; padding: 6px 0; }

body.pa-mobile .pa-tabs {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  z-index: 20;
  background: #333;
  padding-bottom: env(safe-area-inset-bottom);
}
.pa-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #ccc;
  font-size: 15px;
}
.pa-tabs button.pa-active {
  color: #fff;
  font-weight: bold;
  box-shadow: inset 0 3px 0 #008cba;
}