/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.session-card {
  max-width: 500px;
}

:root {
  --sidebar-width: 240px;
}

.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid #e0e0e0;
  height: 100vh;
  position: fixed;
  justify-content: space-between;
  padding: var(--sizing-md);

  & > a {
      padding: 6px 8px;
      border-radius: 4px;
      margin: 0 16px;
      text-decoration: none;
  }

  & > a:hover {
      background-color: #f3f3f5;
      color: black;
  }
}

.has-sidebar {
  margin-left: calc(var(--sidebar-width) + var(--sizing-md) * 2);
}

@media screen and (max-width : 800px) {
}

@media screen and (max-width : 630px) {
  .has-sidebar {
    margin-left: 0px;
  }

  .sidebar {
    width: 0px;
  }
}

@media screen and (max-width : 350px) { }

/* .sidebar {
  width: 300px;
  background-color: var(--color-background-secondary);
  border-right: 1px solid var(--color-background-muted);
} */

.navbar {
  padding: var(--sizing-md);
  border-bottom: 1px solid #e0e0e0;
}

.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event {
  border-bottom: 1px solid #e0e0e0;
  padding: var(--sizing-sm) var(--sizing-md);
  cursor: pointer;

  &:hover {
    background-color: #f3f3f5;
  }
}

.event-timestamp {
  color: #4B3E97;
}

.event-level {
  color: #666;
  width: 40px;
  /* clip text only 1 line*/
}

.event-source {
  color: #2F9447;
  width: 80px;
}

.event-id {
  color: #CC8859;
  width: 100px;
}

.event-message {
  width: 300px;
}

.event-metadata {

}

/* JSON */
:root {
  --json-bg: #ffffff;
  --json-text: #403f53;
  --json-key: #4876d6;
  --json-string: #c57b00;
  --json-number: #b76b01;
  --json-boolean: #aa0982;
  --json-null: #994cc3;
  --json-unknown: #0c969b;
  --json-brace: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
    --json-bg: #011627;
    --json-text: #d6deeb;
    --json-key: #82aaff;
    --json-string: #ecc48d;
    --json-number: #f78c6c;
    --json-boolean: #ff5874;
    --json-null: #c792ea;
    --json-unknown: #addb67;
    --json-brace: #637777;
  }
}

pre.json-viewer {
  font-family: monospace;
  background: var(--json-bg);
  color: var(--json-text);
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  line-height: 1.4;
}

.json-key     { color: var(--json-key); }
.json-string  { color: var(--json-string); }
.json-number  { color: var(--json-number); }
.json-boolean { color: var(--json-boolean); }
.json-null    { color: var(--json-null); }
.json-unknown { color: var(--json-unknown); }
.json-brace,
.json-bracket { color: var(--json-brace); }

.json-container {
  display: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.json-container.open {
  display: block;
  max-height: 1000px; /* bump this if needed */
  opacity: 1;
}