/* ============================================================
   GEOINFOWORLD SIGNATURE WEBGIS
   Experience Foundation — Signature v1
   ============================================================ */

:root {

  --giw-space-0: #050a12;
  --giw-space-1: #08111e;
  --giw-space-2: #0c1728;
  --giw-space-3: #122138;

  --giw-glass:
    rgba(11, 24, 42, .88);

  --giw-glass-soft:
    rgba(14, 29, 50, .72);

  --giw-line:
    rgba(180, 210, 240, .10);

  --giw-line-strong:
    rgba(180, 215, 245, .18);

  --giw-text:
    #edf6ff;

  --giw-muted:
    #8397ad;

  --giw-dim:
    #62758a;

  --giw-cyan:
    #45d4ff;

  --giw-cyan-soft:
    rgba(69, 212, 255, .12);

  --giw-blue:
    #5d8cff;

  --giw-green:
    #54e6ab;

  --giw-gold:
    #e8c46a;

  --giw-radius:
    14px;

  --giw-radius-lg:
    20px;

  --giw-shadow:
    0 24px 80px rgba(0,0,0,.35);

  --giw-sidebar-width:
    340px;

  --giw-inspector-width:
    365px;

  --giw-chrome-height:
    132px;
}


/* ============================================================
   DOCUMENT
   ============================================================ */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;

  color:
    var(--giw-text);

  background:
    var(--giw-space-0);

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
}

* {
  box-sizing:
    border-box;
}

button,
input,
select {
  font: inherit;
}


/* ============================================================
   HEADER — COMMAND STRIP
   ============================================================ */

.giw-header {
  position: relative;
  z-index: 80;

  min-height: 70px;

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

  gap: 18px;

  padding:
    11px 18px !important;

  border-bottom:
    1px solid var(--giw-line);

  background:
    linear-gradient(
      115deg,
      #050b14 0%,
      #091528 48%,
      #0b1930 100%
    ) !important;

  box-shadow:
    0 8px 35px rgba(0,0,0,.22);
}

.giw-header::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(69,212,255,.35),
      transparent
    );
}

.giw-header h1 {
  margin: 0;

  font-weight: 650;

  letter-spacing:
    -.025em;

  color:
    var(--giw-text);
}

.giw-header p {
  margin:
    4px 0 0;

  color:
    var(--giw-muted);

  font-size:
    .82rem;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.giw-toolbar {
  position: relative;
  z-index: 75;

  min-height: 54px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    7px 13px !important;

  overflow-x: auto;

  background:
    rgba(7,16,29,.97) !important;

  border-bottom:
    1px solid var(--giw-line);
}

.giw-toolbar button,
.giw-toolbar a {
  min-height:
    35px;

  padding:
    6px 11px !important;

  border:
    1px solid var(--giw-line) !important;

  border-radius:
    9px !important;

  color:
    #c9d9e9 !important;

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

  transition:
    .16s ease;
}

.giw-toolbar button:hover,
.giw-toolbar a:hover {
  color:
    #ffffff !important;

  border-color:
    rgba(69,212,255,.30) !important;

  background:
    var(--giw-cyan-soft) !important;

  transform:
    translateY(-1px);
}


/* ============================================================
   APPLICATION LAYOUT
   ============================================================ */

.giw-layout {
  width:
    100% !important;

  height:
    calc(
      100dvh
      - var(--giw-chrome-height)
    ) !important;

  min-height:
    300px !important;

  display:
    grid !important;

  grid-template-columns:
    var(--giw-sidebar-width)
    minmax(0,1fr) !important;

  gap:
    0 !important;

  overflow:
    hidden !important;

  background:
    var(--giw-space-0);
}


/* ============================================================
   SPATIAL KNOWLEDGE SIDEBAR
   ============================================================ */

.giw-sidebar {
  position: relative;

  height:
    100% !important;

  min-height:
    0 !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  padding:
    0 !important;

  border-right:
    1px solid var(--giw-line);

  background:
    linear-gradient(
      180deg,
      #091422 0%,
      #07111e 100%
    ) !important;

  scrollbar-width:
    thin;
}


.giw-sidebar-head {
  position: sticky;

  top: 0;

  z-index: 10;

  padding:
    17px 16px 13px;

  background:
    linear-gradient(
      180deg,
      rgba(8,18,32,.98),
      rgba(8,18,32,.92)
    );

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid var(--giw-line);
}


.giw-sidebar-eyebrow {
  margin-bottom:
    5px;

  color:
    var(--giw-cyan);

  font-size:
    .66rem;

  font-weight:
    700;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}


.giw-sidebar-title {
  margin:
    0;

  color:
    #f4f9ff;

  font-size:
    1.18rem;

  font-weight:
    680;

  letter-spacing:
    -.025em;
}


.giw-sidebar-description {
  margin:
    5px 0 12px;

  color:
    var(--giw-muted);

  font-size:
    .76rem;

  line-height:
    1.45;
}


.giw-scope-stats {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-bottom:
    11px;
}


.giw-scope-chip {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding:
    4px 7px;

  border-radius:
    999px;

  border:
    1px solid var(--giw-line);

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

  color:
    #b5c8da;

  font-size:
    .68rem;
}


.giw-scope-chip strong {
  color:
    var(--giw-cyan);

  font-weight:
    650;
}


#giw-layer-search {
  width:
    100% !important;

  min-height:
    42px;

  padding:
    9px 12px !important;

  outline:
    none;

  border:
    1px solid var(--giw-line-strong) !important;

  border-radius:
    10px !important;

  color:
    #edf7ff !important;

  background:
    rgba(255,255,255,.045) !important;

  transition:
    .16s ease;
}


#giw-layer-search:focus {
  border-color:
    rgba(69,212,255,.48) !important;

  background:
    rgba(69,212,255,.055) !important;

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


.giw-semantic-browser {
  display:
    grid;

  gap:
    7px;

  padding:
    10px 9px 18px;
}


/* ============================================================
   KNOWLEDGE TREE
   ============================================================ */

.giw-tree-scope {
  overflow:
    hidden;

  border:
    1px solid var(--giw-line);

  border-radius:
    11px;

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


.giw-tree-category {
  margin:
    4px 6px;

  overflow:
    hidden;

  border-radius:
    9px;

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


.giw-tree-subcategory {
  margin:
    3px 6px 6px;

  border-radius:
    7px;
}


.giw-tree-summary {
  display:
    grid;

  grid-template-columns:
    15px
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    7px;

  padding:
    9px 10px;

  cursor:
    pointer;

  user-select:
    none;

  list-style:
    none;

  color:
    #d9e7f4;
}


.giw-tree-summary::-webkit-details-marker {
  display:
    none;
}


.giw-tree-summary::before {
  content:
    "›";

  color:
    var(--giw-dim);

  font-size:
    17px;

  line-height:
    1;

  transition:
    transform .14s ease;
}


details[open]
> .giw-tree-summary::before {
  transform:
    rotate(90deg);

  color:
    var(--giw-cyan);
}


.giw-tree-scope
> .giw-tree-summary {
  font-size:
    .89rem;

  font-weight:
    680;
}


.giw-tree-category
> .giw-tree-summary {
  padding-left:
    12px;

  color:
    #c8d8e8;

  font-size:
    .81rem;

  font-weight:
    600;
}


.giw-tree-subcategory
> .giw-tree-summary {
  padding:
    6px 9px;

  color:
    #8296aa;

  font-size:
    .73rem;
}


.giw-tree-count {
  min-width:
    24px;

  padding:
    2px 6px;

  text-align:
    center;

  color:
    #93eaff;

  font-size:
    .65rem;

  border-radius:
    999px;

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


.giw-tree-layers {
  display:
    grid;

  gap:
    4px;

  padding:
    3px 5px 8px;
}


/* ============================================================
   INDIVIDUAL LAYER
   ============================================================ */

.giw-layer {
  overflow:
    hidden;

  border:
    1px solid transparent !important;

  border-radius:
    8px !important;

  background:
    rgba(255,255,255,.018) !important;

  transition:
    .14s ease;
}


.giw-layer:hover {
  border-color:
    var(--giw-line) !important;

  background:
    rgba(255,255,255,.045) !important;
}


.giw-layer:has(
  input[data-giw-layer]:checked
) {
  border-color:
    rgba(69,212,255,.20) !important;

  background:
    rgba(69,212,255,.055) !important;
}


.giw-layer-main {
  padding:
    7px !important;
}


.giw-layer-label {
  color:
    #dbe8f4 !important;
}


.giw-layer-label strong {
  font-size:
    .78rem;

  font-weight:
    580;
}


.giw-layer-label small {
  color:
    #6f8498 !important;

  font-size:
    .65rem;
}


.giw-layer-tools {
  opacity:
    .55;

  transition:
    opacity .14s ease;
}


.giw-layer:hover
.giw-layer-tools {
  opacity:
    1;
}


.giw-layer-tools button {
  min-height:
    26px;

  border:
    1px solid var(--giw-line) !important;

  border-radius:
    6px !important;

  color:
    #8fa5b9 !important;

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


/* ============================================================
   MAP STAGE
   ============================================================ */

.giw-map-column {
  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  overflow:
    hidden !important;

  background:
    #0b1822;
}


.giw-map-panel {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    300px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      #234052 0%,
      #132a39 38%,
      #07131e 100%
    ) !important;
}


#giw-map,
.giw-map {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    100px !important;

  min-height:
    300px !important;

  overflow:
    hidden !important;

  background:
    radial-gradient(
      ellipse at center,
      #294a5f 0%,
      #152d3c 48%,
      #071521 100%
    ) !important;
}


#giw-map .ol-viewport,
.giw-map .ol-viewport {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;
}


/* subtle visual atmosphere */

.giw-map-panel::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  box-shadow:
    inset 0 0 80px
    rgba(0,12,25,.28);
}


/* ============================================================
   MAP HUD
   ============================================================ */

.giw-map-hud {
  position:
    absolute;

  left:
    14px;

  bottom:
    13px;

  z-index:
    35;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 9px;

  color:
    #c8d9e7;

  font-size:
    .69rem;

  border:
    1px solid rgba(200,225,245,.16);

  border-radius:
    8px;

  background:
    rgba(5,15,26,.76);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 10px 35px rgba(0,0,0,.22);
}


.giw-map-hud strong {
  color:
    var(--giw-cyan);

  font-weight:
    650;
}


.giw-map-footer {
  display:
    none !important;
}


/* ============================================================
   FLOATING INTELLIGENCE INSPECTOR
   ============================================================ */

.giw-inspector {
  position:
    absolute !important;

  top:
    14px;

  right:
    14px;

  bottom:
    14px;

  z-index:
    45;

  width:
    var(--giw-inspector-width);

  height:
    auto !important;

  min-height:
    0 !important;

  overflow-y:
    auto !important;

  padding:
    13px !important;

  color:
    var(--giw-text) !important;

  border:
    1px solid var(--giw-line-strong) !important;

  border-radius:
    var(--giw-radius-lg) !important;

  background:
    var(--giw-glass) !important;

  backdrop-filter:
    blur(18px)
    saturate(120%);

  box-shadow:
    var(--giw-shadow);

  scrollbar-width:
    thin;
}


/* ============================================================
   MAP SHELL CONTROLS
   ============================================================ */

.giw-shell-controls {
  position:
    absolute;

  top:
    14px;

  left:
    14px;

  z-index:
    46;

  display:
    flex;

  gap:
    5px;
}


.giw-shell-control {
  min-height:
    34px;

  padding:
    6px 9px;

  cursor:
    pointer;

  color:
    #c9d9e8;

  border:
    1px solid rgba(200,225,245,.15);

  border-radius:
    8px;

  background:
    rgba(5,15,26,.77);

  backdrop-filter:
    blur(14px);

  transition:
    .15s ease;
}


.giw-shell-control:hover {
  color:
    #ffffff;

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

  background:
    rgba(18,46,66,.88);
}


/* ============================================================
   RESULTS — BOTTOM INTELLIGENCE SHEET
   ============================================================ */

.giw-utility-panel {
  position:
    fixed !important;

  left:
    calc(
      var(--giw-sidebar-width)
      + 14px
    );

  right:
    14px;

  bottom:
    12px;

  z-index:
    60;

  max-height:
    310px;

  overflow:
    auto;

  padding:
    13px !important;

  color:
    var(--giw-text) !important;

  border:
    1px solid var(--giw-line-strong) !important;

  border-radius:
    var(--giw-radius-lg) !important;

  background:
    rgba(8,20,35,.94) !important;

  backdrop-filter:
    blur(18px);

  box-shadow:
    var(--giw-shadow);

  transition:
    .18s ease;
}


/* ============================================================
   COLLAPSE STATES
   ============================================================ */

body.giw-hide-sidebar {
  --giw-sidebar-width:
    0px;
}

body.giw-hide-sidebar
.giw-sidebar {
  display:
    none !important;
}


body.giw-hide-inspector
.giw-inspector {
  display:
    none !important;
}


body.giw-hide-results
.giw-utility-panel {
  transform:
    translateY(
      calc(100% + 25px)
    );

  opacity:
    0;

  pointer-events:
    none;
}


/* ============================================================
   OPENLAYERS CONTROLS
   ============================================================ */

.ol-control {
  z-index:
    30;
}


.ol-control button {
  color:
    #dcebf7 !important;

  border:
    1px solid rgba(200,225,245,.14) !important;

  border-radius:
    8px !important;

  background:
    rgba(5,15,26,.80) !important;

  backdrop-filter:
    blur(12px);
}


.ol-control button:hover {
  background:
    rgba(19,48,69,.94) !important;
}


.ol-zoom {
  left:
    14px !important;

  top:
    62px !important;
}


.ol-attribution {
  background:
    rgba(5,15,26,.70) !important;

  color:
    #8da3b8 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {

  :root {
    --giw-sidebar-width:
      300px;

    --giw-inspector-width:
      320px;
  }

}


@media (max-width: 900px) {

  .giw-inspector {
    display:
      none !important;
  }

}


@media (max-width: 700px) {

  :root {
    --giw-sidebar-width:
      0px;
  }

  .giw-sidebar {
    display:
      none !important;
  }

  .giw-layout {
    grid-template-columns:
      minmax(0,1fr) !important;
  }

  .giw-utility-panel {
    left:
      10px;

    right:
      10px;
  }

}


/* ============================================================
   READY
   ============================================================ */

body.giw-signature-ready
.giw-map-panel {
  outline:
    1px solid rgba(69,212,255,.08);
}