/* ============================================================
   GEOINFOWORLD
   Spatial Selection & Query Engine v1
   ============================================================ */

.giw-selection-group {
  display: grid;
  gap: 4px;
}


/* ------------------------------------------------------------
   QUERY PANEL
   ------------------------------------------------------------ */

.giw-query-panel {
  display: grid;
  gap: 10px;
}


.giw-query-field {
  display: grid;
  gap: 5px;
}


.giw-query-field label {
  color: #71889d;

  font-size: .62rem;

  font-weight: 650;

  letter-spacing: .06em;

  text-transform: uppercase;
}


.giw-query-field select,
.giw-query-field input {
  width: 100%;

  min-height: 36px;

  padding: 7px 9px;

  outline: none;

  border:
    1px solid rgba(180,210,240,.12);

  border-radius: 8px;

  color: #dcebf6;

  background:
    rgba(255,255,255,.025);
}


.giw-query-field select:focus,
.giw-query-field input:focus {
  border-color:
    rgba(69,212,255,.38);

  box-shadow:
    0 0 0 3px
    rgba(69,212,255,.06);
}


.giw-query-actions {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 6px;
}


.giw-query-action {
  min-height: 34px;

  cursor: pointer;

  border:
    1px solid rgba(180,210,240,.11);

  border-radius: 8px;

  color: #a8bfd1;

  background:
    rgba(255,255,255,.023);

  font-size: .66rem;
}


.giw-query-action:hover {
  color: #e9f8ff;

  border-color:
    rgba(69,212,255,.28);

  background:
    rgba(69,212,255,.06);
}


.giw-query-status {
  padding: 8px 9px;

  border:
    1px solid rgba(180,210,240,.08);

  border-radius: 8px;

  color: #7f96a9;

  background:
    rgba(255,255,255,.015);

  font-size: .66rem;

  line-height: 1.45;
}


/* ------------------------------------------------------------
   SELECTION OVERLAY
   ------------------------------------------------------------ */

.giw-selection-highlight {
  pointer-events: none;
}


/* ------------------------------------------------------------
   RESULTS SHEET
   ------------------------------------------------------------ */

.giw-results-shell {
  display: grid;

  grid-template-rows:
    auto
    minmax(0,1fr);

  height: 100%;
}


.giw-results-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding-bottom: 9px;

  border-bottom:
    1px solid rgba(180,210,240,.09);
}


.giw-results-title {
  display: flex;

  align-items: baseline;

  gap: 8px;
}


.giw-results-title strong {
  color: #eef8ff;

  font-size: .84rem;
}


.giw-results-count {
  color: #55dafc;

  font-size: .66rem;
}


.giw-results-actions {
  display: flex;

  align-items: center;

  gap: 5px;
}


.giw-results-button {
  min-height: 30px;

  padding: 5px 8px;

  cursor: pointer;

  border:
    1px solid rgba(180,210,240,.10);

  border-radius: 7px;

  color: #8da5b8;

  background:
    rgba(255,255,255,.02);

  font-size: .62rem;
}


.giw-results-button:hover {
  color: #dff7ff;

  border-color:
    rgba(69,212,255,.24);
}


/* ------------------------------------------------------------
   RESULT FILTER
   ------------------------------------------------------------ */

.giw-results-filter {
  min-width: 200px;

  min-height: 30px;

  padding: 5px 8px;

  outline: none;

  border:
    1px solid rgba(180,210,240,.10);

  border-radius: 7px;

  color: #c7d9e7;

  background:
    rgba(255,255,255,.025);

  font-size: .64rem;
}


/* ------------------------------------------------------------
   ATTRIBUTE TABLE
   ------------------------------------------------------------ */

.giw-table-wrap {
  width: 100%;

  min-height: 0;

  overflow: auto;

  margin-top: 8px;
}


.giw-attribute-table {
  width: max-content;

  min-width: 100%;

  border-collapse: collapse;

  font-size: .65rem;
}


.giw-attribute-table th {
  position: sticky;

  top: 0;

  z-index: 3;

  padding: 7px 9px;

  text-align: left;

  white-space: nowrap;

  color: #8fa8bb;

  background: #0b1c2d;

  border-bottom:
    1px solid rgba(180,210,240,.13);
}


.giw-attribute-table td {
  max-width: 300px;

  padding: 6px 9px;

  overflow: hidden;

  color: #b8cad8;

  border-bottom:
    1px solid rgba(180,210,240,.055);

  text-overflow: ellipsis;

  white-space: nowrap;
}


.giw-attribute-table tbody tr {
  cursor: pointer;
}


.giw-attribute-table tbody tr:hover {
  background:
    rgba(69,212,255,.045);
}


.giw-attribute-table tbody tr.is-selected {
  background:
    rgba(69,212,255,.085);
}


/* ------------------------------------------------------------
   BOTTOM PANEL
   ------------------------------------------------------------ */

.giw-app-shell
> .giw-utility-panel.giw-selection-results {
  display: block !important;

  height: 265px;

  max-height: 42vh !important;

  padding: 11px !important;
}


/* ------------------------------------------------------------
   SELECTION MODE INDICATOR
   ------------------------------------------------------------ */

.giw-selection-mode {
  position: absolute;

  left: 64px;
  bottom: 66px;

  z-index: 75;

  display: none;

  padding: 6px 9px;

  border:
    1px solid rgba(69,212,255,.22);

  border-radius: 8px;

  color: #b9efff;

  background:
    rgba(5,18,30,.84);

  backdrop-filter:
    blur(12px);

  font-size: .64rem;
}


.giw-selection-mode.is-visible {
  display: block;
}