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

:root {
  --goarn-color-operations: #8d8dde;
  --goarn-color-institutions: #93d3c7;
  --goarn-color-virtual-spaces: #196874;
  --goarn-color-events: #bc6ce0;
  --goarn-color-scom: #f38a3f;
}

html {
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;
}

body {
  all: unset;
  position: relative;
  display: grid;
  grid-template-rows: var(--goarn-appbar-height) auto;
  grid-template-columns: var(--goarn-navmenu-width) auto;

  min-height: 100dvh;
  max-height: 100dvh;
  width: 100dvw;
  margin: 0;

  overflow: hidden scroll;
  overscroll-behavior: none;
  color: var(--goarn-color-text);
  background-color: var(--goarn-color-background);
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
}

body > header {
  position: sticky;
  top: 0;
  left: 0;

  grid-column: 1/3;
  grid-row: 1;
  z-index: 1000;
  border-bottom: 1px solid var(--goarn-color-border) !important;
  border-radius: 0 !important;
}

body > nav {
  position: sticky;
  top: var(--goarn-appbar-height);
  left: 0;
  min-height: calc(100dvh - var(--goarn-appbar-height));
  max-height: calc(100dvh - var(--goarn-appbar-height));

  grid-column: 1;
  grid-row: 2;
  z-index: 1000;

  & > menu {
    background-color: #293267;

    a[href*="operations"][active] {
      border-left-color: var(--goarn-color-operations);

      i {
        color: var(--goarn-color-operations);
      }
    }

    a[href*="institutions"][active] {
      border-left-color: var(--goarn-color-institutions);

      i {
        color: var(--goarn-color-institutions);
      }
    }

    a[href*="virtual-spaces"][active] {
      border-left-color: var(--goarn-color-virtual-spaces);

      i {
        color: var(--goarn-color-virtual-spaces);
      }
    }

    a[href*="events"][active] {
      border-left-color: var(--goarn-color-events);

      i {
        color: var(--goarn-color-events);
      }
    }

    a[href*="scom"][active] {
      border-left-color: var(--goarn-color-scom);

      i {
        color: var(--goarn-color-scom);
      }
    }
  }
}

body > main {
  grid-column: 2;
  grid-row: 2;
  min-height: calc(100dvh - var(--goarn-appbar-height));
  width: calc(100dvw - var(--goarn-navmenu-width));
  padding-right: 1rem;
  display: flex;
  flex-direction: column;

  & > .main-body {
    position: relative;
    flex: 1;

    &.dashboard-page,
    &.operation-details,
    &.operation-form,
    &.vs-details,
    &.vs-form,
    &.manage-member {
      padding: 1rem;
    }
  }

  dialog.goarn-panel {
    height: calc(100dvh - var(--goarn-appbar-height) - 0.5rem) !important;
    inset: var(--goarn-appbar-height) 0 0 auto !important;
  }
}

body:has(dialog[open]) {
  overflow: hidden !important;
  touch-action: none !important;
}