/* Overrides on the vendored Vuexy theme. Anything a Bootstrap utility can say belongs in the template. */

:root {
  /* Both themes are ours; without this Chrome's auto-dark on Android force-darkens the light one. */
  color-scheme: light dark;

  /* Vuexy asks for Public Sans from the Google CDN; we serve Inter Variable ourselves. */
  --bs-font-sans-serif:
    "Inter Variable", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /* The logo pink. It carries neither white (3.55) nor dark (3.79) text, so it decorates and never
     fills anything a label sits on — that is --bs-primary's job. */
  --sk-accent: #ff2d7a;

  /* Money accents. Legible only as a fill under dark text (7.36); against white it is 1.83 and vanishes. */
  --sk-gold: #ffb020;
}

[data-bs-theme="dark"] {
  --sk-gold: #ffc55c;
}

/* Vuexy leaves the focus ring to the browser, which loses it against pink. */
:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

/*
 * Chrome paints its own background layer on an autofilled field. The theme's answer is
 * background-clip:text, which clips that layer to the glyphs — and since the layer is nearly white, the
 * text disappears until the visitor types and the field stops counting as autofilled. Cover the layer
 * instead, and state the text colour outright rather than inheriting whatever the UA picked.
 */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  background-clip: padding-box !important;
  -webkit-text-fill-color: var(--bs-heading-color);
  box-shadow: 0 0 0 100rem var(--bs-paper-bg) inset;
  caret-color: var(--bs-heading-color);
}

/* One field, not Vuexy's six JS-driven boxes: works with JS off and autofill sees a single input. */
.otp-input {
  max-width: 12rem;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  text-align: center;
}

/* Vuexy sizes the card from this property, so the reading-width RODO page needs no second layout. */
.authentication-wrapper.is-wide {
  --bs-auth-basic-inner-max-width: 720px;
}

/*
 * Baseline alignment, not centring: the mark's own bottom edge is the pig's feet, so they land on the
 * wordmark's baseline instead of the whole image box being centred against the text — which lifts the
 * pig, because the coin makes the image taller than the animal.
 */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  text-decoration: none;
}

/* Cropped to real ink, so the box height is the coin-to-feet distance and nothing else. */
.brand-mark {
  width: 2.85rem;
  height: 3.15rem;
}

.brand-name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bs-heading-color);
}

/* theme.css gives .navbar-nav-right flex-basis:100% for its own navbar variants. In a nowrap bar that
   only makes the block shrink to its content, so nothing inside it can be pushed right — the block
   itself has to be. */
.layout-navbar .navbar-nav-right {
  flex-basis: auto;
  margin-inline-start: auto;
}

/* The theme pads .app-brand inline only, which leaves the lockup flush against the top edge. */
.layout-menu .app-brand {
  padding-block: 1.25rem 0.5rem;
}

/* Side-menu lockup reads at header scale, not the auth card's hero scale. Scoped to .app-brand so the
   card's own brand-mark/brand-name stay untouched. */
.app-brand .brand-mark {
  width: 1.85rem;
  height: 2.05rem;
}

.app-brand .brand-name {
  font-size: 1.125rem;
}

/* theme.css only shadows the navbar for its fixed/horizontal variants; ours is static-positioned, so it
   needs its own hairline to read as a bar rather than blend into the content below. */
.layout-navbar {
  border-bottom: 1px solid var(--bs-border-color);
}

/*
 * Bootstrap's dropdown CSS ships unconditionally with theme.css, but its .show toggle and positioning
 * both assume bootstrap.js + Popper. We drive the same classes off a native <details> instead: the
 * browser handles opening, keyboard activation and the marker is ours to hide.
 */
details.dropdown > summary {
  cursor: pointer;
  list-style: none;
}

details.dropdown > summary::-webkit-details-marker {
  display: none;
}

/* Bootstrap's own default is display:none until .show is added by its JS; open the native way instead. */
details.dropdown[open] > .dropdown-menu {
  display: block;
}

/* .dropdown-menu-end only takes effect under [data-bs-popper], an attribute Bootstrap's JS adds. These
   menus open natively and sit at the right edge of the bar, so without this they run off the screen. */
details.dropdown > .dropdown-menu {
  inset-inline: auto 0;
}

/* Missing from the theme's purged icon set, which is vendored and would lose an edit on upgrade. The set
   is CSS masks, not a font, so this one rule is the whole icon. Artwork from @tabler/icons. */
.tabler-pig-money {
  --svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><g fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M15 11v.01'/><path d='M5.173 8.378a3 3 0 1 1 4.656 -1.377'/><path d='M16 4v3.803a6.019 6.019 0 0 1 2.658 3.197h1.341a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-1.342c-.336 .95 -.907 1.8 -1.658 2.473v2.027a1.5 1.5 0 0 1 -3 0v-.583a6.04 6.04 0 0 1 -1 .083h-4a6.04 6.04 0 0 1 -1 -.083v.583a1.5 1.5 0 0 1 -3 0v-2l0 -.027a6 6 0 0 1 4 -10.473h2.5l4.5 -3h0z'/></g></svg>");
}

/* 32 marks over 270deg, leaving the bottom open for the numbers — hence the 225deg start and 8.71deg step. */
.gauge {
  position: relative;
  width: 9rem;
  height: 9rem;
  margin: 0.5rem auto;
}

.gauge-tick {
  position: absolute;
  inset: 0;
  width: 2px;
  height: 100%;
  margin: auto;
  transform: rotate(calc(225deg + (var(--i) - 1) * 8.71deg));
}

.gauge-tick::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.8rem;
  border-radius: 1px;
  background: var(--bs-border-color);
}

.gauge-tick.is-on::before {
  background: var(--sk-accent);
}

.gauge-face {
  position: absolute;
  inset: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.gauge-pig {
  font-size: 2.5rem;
  color: var(--sk-accent);
}

.gauge-value {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--bs-heading-color);
}

/* Native <dialog>: the theme's .modal needs Bootstrap's JavaScript, which this app does not ship. */
.app-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-paper-bg);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-lg);
}

.app-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.app-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}