:root {
  --giw-header-h: 64px;
  --giw-toolbar-h: 48px;
  --giw-sidebar-w: 340px;
  --giw-inspector-w: 360px;
  --giw-status-h: 28px;
  --giw-utility-max-h: 300px;
  --giw-panel-border: rgba(148, 163, 184, 0.22);
  --giw-panel-surface: rgba(13, 21, 33, 0.97);
  --giw-focus: #45d4ff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-width: 0;
}

.giw-app-shell,
.giw-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.giw-app-shell > .giw-header,
.giw-shell > .giw-header {
  height: var(--giw-header-h) !important;
  min-height: var(--giw-header-h) !important;
  max-height: var(--giw-header-h) !important;
  overflow: hidden;
}

.giw-app-shell > .giw-toolbar,
.giw-shell > .giw-toolbar {
  height: var(--giw-toolbar-h) !important;
  min-height: var(--giw-toolbar-h) !important;
  max-height: var(--giw-toolbar-h) !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.giw-layout,
.giw-map-column,
.giw-map-panel,
#giw-map {
  min-width: 0 !important;
  min-height: 0 !important;
}

.giw-sidebar {
  width: var(--giw-sidebar-w) !important;
  min-width: var(--giw-sidebar-w) !important;
  max-width: var(--giw-sidebar-w) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--giw-panel-surface);
  border-right: 1px solid var(--giw-panel-border);
}

.giw-inspector {
  width: var(--giw-inspector-w) !important;
  max-width: var(--giw-inspector-w) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--giw-panel-surface);
  border-left: 1px solid var(--giw-panel-border);
}

.giw-map-panel,
#giw-map {
  width: 100% !important;
  height: 100% !important;
  min-width: 200px !important;
  min-height: 300px !important;
  overflow: hidden !important;
}

.giw-utility-panel {
  max-height: var(--giw-utility-max-h) !important;
  overflow: auto !important;
}

.giw-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.giw-header-link {
  white-space: nowrap;
}

.giw-layer,
.giw-inspector article,
.giw-filter-card,
.giw-report-card {
  border-color: var(--giw-panel-border) !important;
}

.giw-toolbar button:focus-visible,
.giw-sidebar button:focus-visible,
.giw-sidebar input:focus-visible,
.giw-header-link:focus-visible {
  outline: 2px solid var(--giw-focus);
  outline-offset: 2px;
}

@media (max-width: 850px) {
  :root {
    --giw-sidebar-w: 290px;
  }
}

@media (max-width: 650px) {
  .giw-sidebar {
    width: min(88vw, 330px) !important;
    min-width: 0 !important;
    max-width: min(88vw, 330px) !important;
  }

  .giw-inspector {
    width: min(90vw, 360px) !important;
    max-width: min(90vw, 360px) !important;
  }

  .giw-header p,
  .giw-stat {
    display: none;
  }
}