/* Quiotto look for the Upptime status page: tokens from vidiflow.css (VidiCenter repo).
   Replaces the built-in theme (themeUrl), so it sets Upptime's color variables.
   Upptime loads this file before its global.css: rules that compete with global.css
   start with `html` to win on specificity. Nav overrides use !important, simpler than
   out-specifying Svelte's scoped classes. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --q-indigo-900: #15143A;
  --q-indigo-700: #282860;
  --q-indigo-600: #2F2C6E;
  --q-indigo-300: #8884C4;
  --q-blue-violet: #5A57C9;
  --q-grad-violet: linear-gradient(90deg, var(--q-blue-violet) 0%, #8253A8 100%);
  --q-bg-subtle: #EFEFF6;
  --q-border: #E7E6F1;
  --q-fg-1: #1B1A33;
  --q-fg-3: #6E6C8A;
  --q-fg-faint: #9D9BB5;
  --q-on-dark: #ECEBF5;
  --q-positive: #2E9B6B;
  --q-negative: #D4515F;
  --q-negative-bg: #FBEAEC;
  --q-warning: #D9882F;
  --q-r-sm: 6px;
  --q-r-md: 10px;
  --q-shadow-xs: 0 1px 2px rgba(27, 26, 51, .06);

  --body-background-color: var(--q-bg-subtle);
  --body-text-color: var(--q-fg-1);
  --card-background-color: #FFFFFF;
  --card-border-color: var(--q-border);
  --nav-background-color: var(--q-indigo-900);
  --nav-border-bottom-color: var(--q-indigo-900);
  --nav-current-border-bottom-color: var(--q-indigo-300);
  --up-border-left-color: var(--q-positive);
  --down-border-left-color: var(--q-negative);
  --down-background-color: var(--q-negative-bg);
  --degraded-border-left-color: var(--q-warning);
  --tag-color: #FFFFFF;
  --tag-up-background-color: var(--q-positive);
  --tag-down-background-color: var(--q-negative);
  --tag-degraded-background-color: var(--q-warning);
  --change-background-color: var(--q-warning);
  --error-button-border-color: var(--q-indigo-700);
  --error-button-background-color: var(--q-indigo-600);
  --error-button-color: #FFFFFF;
  --submit-button-border-color: var(--q-indigo-700);
  --submit-button-background-color: var(--q-indigo-600);
  --submit-button-color: #FFFFFF;
}

html body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

html h1, html h2, html h3, html h4 {
  font-weight: 500;
}

html h3 {
  color: var(--q-fg-3);
  opacity: 1;
}

html article {
  border-radius: var(--q-r-md);
  box-shadow: var(--q-shadow-xs);
}

/* response-time graph Upptime sets inline (style="--background: url(...)") on each card */
section.live-status article {
  --background: none !important;
}

/* The 24h/7d/30d/1y/all selector and the uptime line it drives; the 90-day
   bars (uptime-bars.js) carry the uptime figure instead. */
.f > form.r,
section.live-status article > div:not(.q-bars) {
  display: none;
}

/* 90-day availability bars (uptime-bars.js); above Upptime's full-card link overlay
   (article.link a::after), so the tooltips show */
.q-bars {
  position: relative;
  z-index: 1;
  margin-top: 0.75rem;
}

.q-bars-row {
  display: flex;
  gap: 2px;
  height: 28px;
}

.q-bar {
  flex: 1;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .q-bars-row { gap: 1px; }
  .q-bar { border-radius: 1px; }
}

.q-bar:hover {
  opacity: 0.7;
}

.q-bar-up { background: var(--q-positive); }
.q-bar-partial { background: var(--q-warning); }
.q-bar-down { background: var(--q-negative); }
.q-bar-none { background: var(--q-fg-faint); }

.q-bars-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--q-fg-3);
}

html .tag {
  border-radius: var(--q-r-sm);
  font-weight: 500;
}

nav {
  color: var(--q-on-dark);
}

/* Upptime's nav is weight 300, too thin on the dark bar */
nav a {
  font-weight: 500;
  padding: 1.25rem 1rem !important;
}

nav a:hover {
  color: #FFFFFF;
}

nav .logo {
  padding: 0.75rem 0 !important;
  margin-right: 1rem !important;
}

nav .logo img {
  height: 28px !important;
  margin-right: 0.75rem !important;
  border-radius: 0 !important;
}

/* hideNavTitle drops the page name; show the product word as Quiotto's lockup does */
nav .logo::after {
  content: "Status";
  font-weight: 500;
  font-size: 1.15rem;
  background: var(--q-grad-violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(1.6);
}

footer {
  color: var(--q-fg-3);
}