@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
  font-weight: var(--font-weight);
  color: var(--neutral-foreground-rest);
  background: var(--neutral-fill-layer-rest);
  background: #333 !important;
}

/*
 * The only place the viewport height is named. Everything below it is a flex chain
 * — #app to .layout to .main to .body-content to .content to the page's own panels —
 * so no rule has to know how tall the header, the footer or a page's own heading is.
 * FluentLayout's .layout is already height:100%, which needs this to be definite.
 */
#app {
  height: 100dvh;
}

.main {
  flex: 1;
  min-height: 0;
  color: var(--neutral-foreground-rest);
  align-items: stretch !important;
}

.nav-panel {
  flex-shrink: 0;
}

.body-content {
  align-self: stretch;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.content {
  padding: 0.5rem 1.5rem;
  align-self: stretch !important;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

footer {
  background: var(--neutral-layer-4);
  color: var(--neutral-foreground-rest);
  align-items: center;
  padding: 10px 10px;
}

footer a {
  color: var(--neutral-foreground-rest);
  text-decoration: none;
}

footer a:focus {
  outline: 1px dashed;
  outline-offset: 3px;
}

footer a:hover {
  text-decoration: underline;
}

.alert {
  border: 1px dashed var(--accent-fill-rest);
  padding: 5px;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  margin: 20px 0;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::before {
  content: "An error has occurred. "
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #dcfc29;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: #dcfc29;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
  color: white;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

/*
 * The grid renders real table rows and puts fluent-data-grid-row on them as a class, not as
 * an element name; written as an element selector these two matched nothing at all, so a
 * disabled merchant was never dimmed and a selected row was never marked.
 */
.fluent-data-grid-row:has([row-disabled]) {
  opacity: .5;
}

.fluent-data-grid-row.row-active > td {
  background-color: #454b32 !important;
}

.fluent-data-grid-row.row-active > td:first-child {
  box-shadow: inset 3px 0 #dcfc29;
}

.grid-scroll .fluent-data-grid-row:has(td):active > td {
  background-color: #50563a;
}

.grid-scroll table:is(.merchant-grid, .raffle-grid) .fluent-data-grid-row:has(td) {
  cursor: pointer;
}

.back-to-list fluent-button:active {
  transform: translateX(-3px);
  filter: brightness(1.2);
}

.detail-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}

.grid-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
}

.grid-scroll .fluent-data-grid {
  width: max-content;
  min-width: 100%;
}

.grid-scroll .actual-resize-handle {
  touch-action: none;
  width: 16px !important;
  z-index: 2;
}

.grid-scroll .actual-resize-handle:hover,
.grid-scroll .actual-resize-handle.resizing {
  background: #dcfc2933;
  border-inline-end: 2px solid #dcfc29 !important;
}

.merchant-raffles {
  margin: 16px 0 24px;
}

.merchant-raffles .grid-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.merchant-raffles > a {
  display: inline-block;
  margin: 8px 0;
}

.merchant-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

/*
 * A field is a label followed by its value, so the two sit on one line with a real gap
 * between them. Wrapping lets a long value, or the Reveal control next to a masked one,
 * take the following line instead of running over the field below it.
 */
.key-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
  margin-bottom: 4px;
}

/* A tree is not a phrase; it belongs under its label rather than beside it. */
.key-value .json-view {
  flex-basis: 100%;
}

.key-value span {
  word-wrap: break-word;
}

.key-value .not-set {
  color: #888;
  font-style: italic;
}

.key-value .secret-mask {
  letter-spacing: 2px;
  color: #888;
}

.key-value .secret {
  font-family: var(--monospace-font, monospace);
  word-break: break-all;
}

.detail-table {
  border-collapse: collapse;
  margin-bottom: 20px;
}

.detail-table th,
.detail-table td {
  border-bottom: 1px solid #444;
  padding: 3px 15px 3px 0;
  text-align: left;
}

.detail-table th {
  color: #999;
  font-weight: 500;
}

.detail-table .numeric {
  text-align: right;
}

.detail-table .detail-subrow td {
  color: #999;
  padding-left: 15px;
  font-size: var(--type-ramp-minus-1-font-size);
}

.raffle-json {
  margin-top: 20px;
}

.raffle-json > summary,
.json-branch > summary {
  cursor: pointer;
  color: #999;
}

.json-view {
  font-family: var(--monospace-font, monospace);
  font-size: var(--type-ramp-minus-1-font-size);
  line-height: 1.5;
  overflow-x: auto;
}

.json-children {
  border-left: 1px solid #444;
  margin-left: 4px;
  padding-left: 10px;
}

.json-name {
  color: #9ad;
  margin-right: 6px;
}

.json-name::after {
  content: ":";
}

.json-count {
  color: #777;
}

.json-string {
  color: #dcfc29;
  word-break: break-word;
}

.json-number {
  color: #f9a;
}

.json-boolean {
  color: #6cf;
}

.json-null,
.json-empty {
  color: #888;
}

.json-parse-error {
  color: #f88;
  margin-bottom: 5px;
}

.merchant-provider-data {
  margin-top: 10px;
  margin-bottom: 20px;
}

.system-info-group {
  margin-bottom: 25px;
  strong {
    font-weight: 500;
  }
}

h1 {
  margin-bottom: 40px !important;
}

header,
footer {
  background-color: #222 !important;
  color: white !important;
}

header img {
  width: 35px;
  border-radius: 6px;
  margin-left: -7px;
  margin-right: 15px;
  margin-bottom: 2px;
}

.fluent-appbar.nav {
  --appbar-item-size: 70;
  height: 100%;
  background-color: #333;
  border-right: 1px solid #444;
}

.fluent-appbar svg {
  fill: var(--accent-fill-rest) !important;
}

/*
 * A 70px column of navigation takes a fifth of a phone's width, so below the same
 * breakpoint the list pages use, the app bar becomes a row under the content. Fluent's
 * app bar is a plain <nav> whose items are block-level children and whose orientation
 * attribute carries no layout of its own, which is why laying it out horizontally is a
 * matter of making that element a flex row. NavMenu switches the attribute to match, for
 * the sake of the item measurement that hangs off it.
 */
@media (max-width: 900px) {
  .main {
    flex-direction: column-reverse !important;
  }

  .nav-panel {
    width: 100%;
  }

  .fluent-appbar.nav {
    --appbar-item-size: 64;
    display: flex;
    justify-content: center;
    height: auto;
    border-right: none;
    border-top: 1px solid #444;
  }

  /*
   * Fluent draws the active-item indicator only for a vertical bar, as a line down the left
   * edge; a horizontal one gets nothing. Drawn here as an underline instead, so the current
   * page is still marked once the bar has turned.
   */
  .fluent-appbar.nav[orientation=horizontal] .fluent-appbar-item:not([inpopover]) a.active::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--appbar-active-indicator-width);
    background-color: var(--accent-fill-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
  }
}

.divider {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: #555;
  border-radius: 2px;
  transition: background 0.15s;
  /* The drag is driven by pointer events; without this a touch drag scrolls instead. */
  touch-action: none;
}

.divider:hover,
.divider:active {
  background: #dcfc29;
}

.toolbar {
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;

}

.toolbar .fluent-grid > div {
  flex: 0 0 auto;
  max-width: 100%;
}

.toolbar fluent-search {
  width: 230px;
  max-width: 100%;
}

.toolbar > * {
  margin-bottom: 10px;
  margin-top: 10px;
}

#login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#login-form button {
  height: 50px;
  width: 200px;
  font-size: 20px;
  background: #dcfc29;
  border-radius: 5px;
  color: black;
  opacity: .7;
  text-transform: uppercase;
}

#login-form button:hover{
    opacity: .9;
}

.full-width {
  width: 100%;
}

.mb-2 {
  margin-bottom: 2px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mt-2 {
  margin-top: 2px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-35 {
  margin-top: 35px;
}