/*
  DATAHUB-IX looking glass.

  Alice-LG ships a light Bootstrap interface; this puts it in the same room as the site:
  one dark field, one red, Space Grotesk for display, Inter for text, JetBrains Mono for
  anything that is data, and the Nulshock wordmark in place of the default logo. The fonts
  are served from this directory, so the page loads nothing from anywhere else.
*/

/*
  Sizes here are in pixels on purpose. Alice sets a 10px root font size, so rem in this file
  would come out at roughly half of what it reads as, which is how the type ended up tiny.
*/

@font-face {
  font-family: "DHX Display";
  src: url("/theme/fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DHX Sans";
  src: url("/theme/fonts/inter-400.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "DHX Mono";
  src: url("/theme/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DHX Logo";
  src: url("/theme/fonts/Nulshock-Bold.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #07090f;
  --ink-2: #0c0f17;
  --ink-3: #12161f;
  --line: #1c212c;
  --line-strong: #2a3140;
  --paper: #e9ebf1;
  --paper-dim: #a6adbb;
  --paper-mute: #6f7787;
  --red: #e63946;
  --red-soft: #ff5a66;
  --ok: #3ddc97;
  --warn: #f5b942;
  --sans: "DHX Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "DHX Display", ui-sans-serif, system-ui, sans-serif;
  --mono: "DHX Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- ground ---- */

html,
body,
#app,
.page,
.page-body,
.page-content,
.main-content-wrapper {
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--paper);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--red-soft);
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}

hr {
  border-color: var(--line);
}

::selection {
  background: var(--red);
  color: #fff;
}

/* ---- sidebar ---- */

.page-sidebar {
  background: var(--ink-2);
  border-right: 1px solid var(--line);
}

/* The selector matches Alice's own, which sets a fixed height; a bare .sidebar-header loses. */
.page-sidebar .sidebar-header {
  padding: 26px 22px 19px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* Alice fixes this at 58px, which is shorter than the wordmark, the descriptor and the
     link back to the site stacked together, so the last line fell outside the box. */
  height: auto;
}

/* The default logo is a cloud glyph; the wordmark takes its place. */
.sidebar-header .logo {
  display: none !important;
}

/* Alice's own heading stays in the tree for React to manage; ours sits beside it. */
.sidebar-header .title h1 {
  display: none !important;
}

.sidebar-header .title .dhx-mark {
  font-family: "DHX Logo", "Arial Black", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 !important;
  color: #fff !important;
}

.sidebar-header .title p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute) !important;
  margin: 8px 0 0 !important;
}

.sidebar-header .title .dhx-mark .dhx-w {
  color: #fff;
}
.sidebar-header .title .dhx-mark .dhx-ix {
  color: var(--red);
}

.sidebar-header .title a.dhx-home {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-mute);
}
.sidebar-header .title a.dhx-home:hover {
  color: var(--red-soft);
}

.routeservers-list {
  padding: 19px 22px;
}
.routeservers-list h2 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute) !important;
  margin-bottom: 14px;
}
.routeservers-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.routeservers-list li a {
  display: block;
  padding: 8px 11px;
  margin-left: -11px;
  border-left: 2px solid transparent;
  color: var(--paper-dim);
  font-size: 15px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.routeservers-list li a:hover {
  color: var(--paper);
  background: var(--ink-3);
}
.routeservers-list li a.active,
.routeservers-list li.active > a {
  color: var(--paper);
  border-left-color: var(--red);
  background: var(--ink-3);
}
.routeservers-list li .bird-version,
.routeservers-list li small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-mute);
}

.rs-group-dropdown,
.dropdown-selected,
.routeservers-groups-select select {
  background: var(--ink-3) !important;
  border: 1px solid var(--line) !important;
  color: var(--paper-dim) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.dropdown-options,
.dropdown-options li {
  background: var(--ink-3) !important;
  color: var(--paper-dim) !important;
  border-color: var(--line) !important;
}
.dropdown-options li:hover {
  background: var(--ink-2) !important;
  color: var(--paper) !important;
}

/* ---- page furniture ---- */

.page-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 14px;
  margin-bottom: 22px;
  box-shadow: none !important;
}

.jumbotron {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 40px 0 24px;
  margin-bottom: 0;
  color: var(--paper);
}
.jumbotron h1 {
  font-family: var(--display) !important;
  font-size: clamp(30px, 4.2vw, 46px) !important;
  font-weight: 600 !important;
  color: var(--paper) !important;
  max-width: 640px;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.jumbotron p {
  color: var(--paper-dim) !important;
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
  margin-top: 18px;
}
.page-header .status-name,
.status-name {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  color: var(--paper);
}

/* Alice titles its cards in blue italics; here they read as the same small label the site uses. */
.card h2,
.card h3,
.lookup-container h2,
.welcome-page h2,
.welcome-page h3 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute) !important;
  margin-bottom: 14px;
}

.card,
.panel,
.well,
.lookup-container .card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper-dim);
  box-shadow: none;
}

.page-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* ---- tables: the same shape as the tables on the site ---- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--paper-dim);
}
table thead th,
table th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 12px 10px 0;
  white-space: nowrap;
}
table td {
  padding: 10px 12px 10px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table tbody tr:hover td {
  background: var(--ink-2);
}

/* Addresses, prefixes, AS paths and communities are data, so they get the mono face. */
td:first-child,
.route-network,
.neighbor-address,
.as-path,
.bgp-community,
.community,
td .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
td:first-child {
  color: var(--paper);
}

/* ---- state ---- */

.established,
.up,
.state-established {
  color: var(--ok);
}
.down,
.state-down,
.state-idle {
  color: var(--red);
}
.start,
.state-start {
  color: var(--warn);
}

.badge,
.label {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
}
.badge-rpki-valid,
.rpki-valid {
  background: rgba(61, 220, 151, 0.14);
  color: var(--ok);
}
.badge-rpki-invalid,
.rpki-invalid {
  background: rgba(230, 57, 70, 0.16);
  color: var(--red-soft);
}
.badge-rpki-unknown,
.rpki-unknown,
.rpki-not-checked {
  background: rgba(111, 119, 135, 0.16);
  color: var(--paper-mute);
}

/* ---- forms and controls ---- */

.form-control,
input[type="text"],
input[type="search"],
select,
textarea {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 14px;
}
.form-control:focus,
input:focus,
select:focus {
  background: var(--ink-2);
  border-color: var(--paper-mute);
  color: var(--paper);
  outline: none;
  box-shadow: none;
}
.form-control::placeholder {
  color: var(--paper-mute);
}

.input-group-addon {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper-mute);
}

.btn,
button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  padding: 8px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn:hover,
button:hover {
  border-color: var(--paper-mute);
  color: var(--paper);
  background: var(--ink-2);
}
.btn-primary,
.btn-default.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn-primary:hover {
  background: var(--red-soft);
  border-color: var(--red-soft);
  color: #fff;
}

.help-block,
.text-muted,
small {
  color: var(--paper-mute);
  font-size: 13px;
}

/* ---- quick links, tabs, pagination ---- */

.quick-links,
.neighbors-quick-links {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.quick-links a,
.neighbors-quick-links a {
  color: var(--paper-dim);
  margin-left: 13px;
}
.quick-links a:hover,
.neighbors-quick-links a:hover {
  color: var(--red-soft);
}

.nav-tabs {
  border-bottom: 1px solid var(--line-strong);
}
.nav-tabs > li > a {
  border: none;
  border-radius: 0;
  color: var(--paper-mute);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--red);
  color: var(--paper);
}

.pagination > li > a,
.pagination > li > span {
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 0;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ---- the welcome page ---- */

.welcome-page {
  padding-top: 32px;
}
.welcome-page h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  max-width: 640px;
}
.welcome-page p {
  color: var(--paper-dim);
  max-width: 620px;
}

/* Rejection and no-export reasons read as sentences, so leave them in the text face. */
.reject-reason,
.rejection-reason,
.noexport-reason {
  font-family: var(--sans);
  color: var(--warn);
}

/* Alice renders spinners and icons with Font Awesome; keep them from glowing white. */
.svg-inline--fa {
  color: inherit;
}

/*
  Bootstrap's column gutter sets the cards fifteen pixels to the right of the heading above
  them, which reads as a mistake rather than as a margin. There is one column on this page,
  so the gutter buys nothing.
*/
.welcome-page [class^="col-"],
.welcome-page [class*=" col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* The search hints below the box. */
.lookup-help {
  padding-left: 0;
  margin-top: 34px;
  color: var(--paper-dim);
}
.lookup-help p {
  font-size: 15px;
  margin: 0 0 10px;
}
.lookup-help ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border-left: 1px solid var(--line);
}
.lookup-help li {
  padding: 7px 0 7px 16px;
  font-size: 15px;
  color: var(--paper-dim);
}
.lookup-help li b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
}

/* The footer carries one line of provenance, written in by theme.js. */
.page-footer .dhx-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
}
.page-footer .dhx-foot a {
  color: var(--paper-mute);
}
.page-footer .dhx-foot a:hover {
  color: var(--red-soft);
}

/* An empty result should look deliberate rather than broken. */
.routeservers-page .card p,
.no-neighbors,
.dhx-empty {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  padding: 26px 0;
  margin: 0;
}

/* On the welcome page the header bar has nothing in it, so it reads as a stray rule. */
.page-header:empty {
  display: none;
}

/*
  The hero is one sentence and should break evenly rather than leaving a single word alone
  on the second line.
*/
.jumbotron h1,
.welcome-page h1 {
  max-width: 860px;
  text-wrap: balance;
}

/*
  Alice lays the page out as a flex row and gives the sidebar a share of the width, which on a
  phone leaves the sidebar and the content each holding half the screen. Below this width the
  two stack and the route server list becomes a row of tabs.
*/
@media (max-width: 860px) {
  /* The flex row is .page; the sidebar and the body are its two children. */
  .page {
    display: block;
  }
  .page-sidebar,
  .page-body {
    width: auto;
  }
  /*
    The content is a flex item inside .page-body. It has to be allowed to shrink, or it sizes
    to the widest thing in it and the whole page scrolls sideways.
  */
  .page-content {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }
  .page-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .page-sidebar .sidebar-header {
    padding: 18px 20px 14px;
  }
  .routeservers-list {
    padding: 14px 20px 16px;
  }
  .routeservers-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
  }
  .routeservers-list li a {
    margin-left: 0;
    padding: 6px 0;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .routeservers-list li a:hover,
  .routeservers-list li a.active,
  .routeservers-list li.active > a {
    background: transparent;
    border-left: none;
    border-bottom-color: var(--red);
  }
  .page-header,
  .main-content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Route tables are wider than a phone; they scroll inside their own card. */
  .card {
    overflow-x: auto;
  }
  .jumbotron {
    padding-top: 20px;
  }
}