/* =============================================================================
   LOOC App stylesheet
   =============================================================================

   Bootstrap and the Open Iconic font used to be loaded ahead of this file. Both are gone: Open Iconic
   shipped five font binaries for zero oi-* classes, and Bootstrap shipped 160 KB for eight utility
   classes, which are reproduced in the "Utilities" section below. Anything that looked like a Bootstrap
   class in the markup is now defined here.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Brand palette. The single place these values are written down - they used to be repeated as bare
     hex across this file and a third time, without the leading hash, in BarSegmentDefinition.cs.
     Names follow the Portal tokens.css so the two stay recognisable side by side.

     Deliberately here rather than in tokens.css, which is the one structural difference from the
     Portal: this stylesheet is linked from index.html and so paints the boot screen and the page
     shell before the WebAssembly runtime starts, while tokens.css only arrives once App.razor
     renders its head content. A palette that lived there would leave every var() in this file
     undefined until boot, which is a page with no gradient and no colours for the first second.
     tokens.css holds the Radzen overrides, which cannot be here - see its own header.
     --------------------------------------------------------------------------- */
  /* The brand primary from docs/design-system.md. The App paints it only in its icons today - the
     favicon and the maskable install icon - but the palette is the record of the brand, not of what
     this stylesheet happens to reference, so it is written down here rather than nowhere. */
  --looc-green: #39B388;
  --looc-teal: #7DF8C2;
  --looc-teal-rgb: 125, 248, 194;
  --looc-teal-dark: #01AC8C;
  --looc-teal-deep: #002E33;
  --looc-cyan: #03FCE8;
  --looc-blue: #4CA0D6;
  /* Energy Orange and Alert Red exactly as docs/design-system.md writes them. They used to be #f05b0f
     and #D92028 - both under 2% per channel away from the documented values, which is what a colour
     picked off a screenshot looks like rather than a decision. A third orange, #F06721, sat beside
     them; at six percent off in one channel it was not a step in a ramp either, so it is folded in. */
  --looc-orange: #F1571C;
  --looc-red: #DB1E28;
  --looc-gold: #9C7F3D;
  --looc-green-deep: #06B292;
  --looc-leaf: #488B40;
  --looc-amber: #C57B14;
  --looc-rust: #AD420B;
  --looc-grey: #9E9E9E;
  --looc-grey-light: #B0B0B0;
  --looc-muted: #C9D1CE;

  /* Surfaces and hairlines used by the chrome. */
  --looc-surface: rgba(255, 255, 255, 0.06);
  --looc-border: rgba(255, 255, 255, 0.1);

  /* WCAG 2.5.8 / iOS minimum for anything you tap. */
  --looc-tap-target: 44px;
  --looc-tabbar-height: 60px;

  --looc-font-family: 'Source Sans 3', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   Typography
   -----------------------------------------------------------------------------

   Source Sans 3 is the brand typeface (docs/design-system.md), and its three weights already ship in
   wwwroot/css/fonts. They were never actually used: the single @font-face this file used to carry listed
   all three files as truetype fallbacks of one face, so every weight resolved to Light - and nothing
   referenced the family anyway, so the browser never fetched it. One face per weight, and body uses it. */

@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   Reboot. The handful of normalisations the app actually relied on Bootstrap for.
   ----------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  vertical-align: middle;
}

button {
  font-family: inherit;
}

/* -----------------------------------------------------------------------------
   Utilities. Exactly the Bootstrap classes the markup still uses, and nothing else. The grid columns
   went with the tables, which are on their own CSS grid now.
   ----------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.d-flex {
  display: flex;
}

.w-100 {
  width: 100%;
}

.m-2 {
  margin: 0.5rem;
}

.p-1 {
  padding: 0.25rem;
}

/* -----------------------------------------------------------------------------
   Page shell
   ----------------------------------------------------------------------------- */

/* The top stop is capped at a low alpha on purpose. At full white it lifted the top ~40% of the viewport to
   near-white while the body text stayed white, dropping the header, the period label and the first block
   title far below 4.5:1. Keep this in step with the RadzenBody gradient in MainLayout.razor.
   100dvh rather than 100vh: on a phone 100vh is the viewport without browser chrome, so the last ~60px of
   every page sat underneath the address bar. */
html, body {
  background-color: black;
  background-repeat: repeat, repeat;
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.18), transparent 40%), radial-gradient(at 50% 100%, var(--looc-cyan), transparent 50%);
  height: 100dvh;
  color: white;
}

body {
  font-family: var(--looc-font-family);
}

#app {
  height: 100dvh;
  width: 100%;
}

/* No focus styling existed anywhere, and the browser default ring is all but invisible on this background. */
:focus-visible {
  outline: 2px solid var(--looc-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

span {
  font-weight: 600;
}

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

/* Now a real <button>, so it needs the button chrome stripped rather than inherited. */
#blazor-error-ui .dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
  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::after {
  content: "Er is een fout opgetreden."
}

.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto 0 auto;
}

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

.loading-progress circle:last-child {
  stroke: var(--rz-primary);
  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;
}

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

/* -----------------------------------------------------------------------------
   Device availability
   ----------------------------------------------------------------------------- */

/* Lifted from `gray`, which sits close to the floor against this background. The dimming is paired with an
   "Offline" badge in the device header, so colour is never the only thing carrying the state. */
.is-disabled span, .is-disabled div {
  color: var(--looc-grey-light);
}

.is-disabled .division-bar-shell {
  border: 2px solid var(--looc-grey-light);
}

.is-disabled > .separator {
  background: var(--looc-grey-light);
}

.is-disabled .division-bar-segment {
  background: var(--looc-grey-light) !important;
}

.is-disabled .bar-graph-divider {
  background: var(--looc-grey-light);
}

.device-offline-badge {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--looc-grey-light);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}

div.device-details-header > div {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

  div.device-details-header > div:first-child {
    justify-content: start;
  }

  div.device-details-header > div:last-child {
    justify-content: end;
  }

  div.device-details-header > div > span {
    display: inline-block;
    white-space: nowrap
  }

/* -----------------------------------------------------------------------------
   Header and period navigation
   ----------------------------------------------------------------------------- */

.header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px 0 12px;
  max-width: 960px;
  margin: 0 auto;
}

.spread-space-between {
  display: flex;
  justify-content: space-between;
}

.calendar-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Sized to the tap-target minimum. These were 36px with a 10px glyph inside - the primary control on
   every screen, and under both the WCAG 2.5.8 and the iOS floor. */
.calendar-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--looc-tap-target);
  height: var(--looc-tap-target);
  border-radius: 50%;
  background-color: var(--looc-surface);
  border: 1px solid var(--looc-border);
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.calendar-nav-arrow:hover:not(:disabled) {
  background-color: rgba(var(--looc-teal-rgb), 0.15);
  border-color: rgba(var(--looc-teal-rgb), 0.4);
}

.calendar-nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendar-nav-arrow img {
  width: 14px;
  height: 14px;
}

.calendar-nav-arrow.previous img {
  transform: rotate(-90deg);
}

.calendar-nav-arrow.next img {
  transform: rotate(90deg);
}

/* A label, not a control. The three-state cycle it used to hide is now the segmented control below it. */
.calendar-period-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--looc-tap-target);
  font-size: 15px;
  font-weight: 600;
  color: #FFF;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-period-label img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.calendar-modes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.segmented-control {
  display: inline-flex;
  border-radius: 18px;
  background: var(--looc-surface);
  border: 1px solid var(--looc-border);
  overflow: hidden;
}

.segmented-control button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #FFF;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented-control button[aria-pressed="true"] {
  background: rgba(var(--looc-teal-rgb), 0.22);
  color: var(--looc-teal);
}

.today-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--looc-border);
  background: var(--looc-surface);
  color: #FFF;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.today-button:hover:not(:disabled) {
  background-color: rgba(var(--looc-teal-rgb), 0.15);
}

.today-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--looc-tap-target);
  height: var(--looc-tap-target);
  border-radius: 50%;
  border: 1px solid var(--looc-border);
  background: var(--looc-surface);
  color: #FFF;
  font: inherit;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.icon-button:hover:not(:disabled) {
  background-color: rgba(var(--looc-teal-rgb), 0.15);
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* -----------------------------------------------------------------------------
   Page headings and states
   ----------------------------------------------------------------------------- */

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #FFF;
  margin: 16px 0 12px 0;
}

.page-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  color: #FFF;
}

.page-state-text {
  color: var(--looc-muted);
  font-weight: 400;
}

.loading-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  color: #FFF;
}

.loading-status-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(var(--looc-teal-rgb), 0.25);
  border-top-color: var(--looc-teal);
  animation: loading-status-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes loading-status-spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-status-spinner {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
   Offline banner
   ----------------------------------------------------------------------------- */

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--looc-orange);
  color: #FFF;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Blocks
   ----------------------------------------------------------------------------- */

.page-block > .separator {
  background: radial-gradient(98.62% 105% at 111.83% 115%, var(--looc-orange) 18.58%, var(--looc-red) 56.94%, var(--looc-gold) 71.16%, var(--looc-green-deep) 93.85%);
  height: 1px;
}

.page-block-title {
  font-weight: 600;
  color: var(--looc-teal);
}

.page-block-heading {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
}

/* PageBlock renders a <button> when it navigates, so the browser button chrome has to be stripped back to
   what the <div> variant looks like. */
.page-block--interactive {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.color-swab {
  height: 18px;
  width: 18px;
  border-radius: 2px;
  margin-right: 10px;
}

.page-block .header-value {
  flex-direction: row-reverse;
  font-weight: 600;
  color: #FFF;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 0;
  align-self: end;
}

/* -----------------------------------------------------------------------------
   Bars
   ----------------------------------------------------------------------------- */

/* The positioning context for the divider. The divider used to be a sibling of the shell with a relative
   `left`, so the marker drifted away from the bar it annotates as the row around it changed width. */
.division-bar-shell {
  position: relative;
  border: 2px solid var(--looc-teal-dark);
  width: 100%;
  height: 26px;
  border-radius: 6px;
}

.division-bar-segment {
  height: 18px;
  top: 2px;
  position: relative;
}

  .division-bar-segment:first-of-type {
    margin-left: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .division-bar-segment:last-of-type {
    margin-right: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

div.bar-graph-divider {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 32px;
  background-color: var(--looc-teal);
  transform: translateX(-50%);
}

/* -----------------------------------------------------------------------------
   Gauge
   ----------------------------------------------------------------------------- */

.looc-gauge {
  flex-direction: column;
  height: 60px;
}

.svg-line {
  height: 100%;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
  stroke-miterlimit: 1.5;
}

.looc-gauge div.center-bar {
  background-color: var(--looc-teal);
  width: 4px;
  height: 22px;
  position: relative;
  align-self: center;
  justify-self: center;
  left: calc(50% - 2px);
  top: calc(-100% - 2px);
}

.looc-gauge > span {
  position: relative;
  top: -65%;
  font-size: 20px;
  align-self: center;
}

span.value-has-increased {
  color: var(--looc-teal);
  align-self: center;
}

span.value-has-decreased {
  color: var(--looc-orange);
  align-self: center;
}

/* Shown when there is nothing to compare against, so neither the gain nor the loss colour would be honest. */
span.value-is-neutral {
  color: var(--looc-grey);
  align-self: center;
}

/* One rule for every gauge. Each path passes its own end state in --gauge-dash-offset, which keeps the
   animation out of per-instance <style> blocks whose selectors were built from the gauge display name. */
.gauge-path {
  fill: none;
  stroke-width: 45px;
  stroke-dasharray: 1000px;
  stroke-dashoffset: 1000px;
  animation: gauge-path-fill 2s linear forwards;
}

@keyframes gauge-path-fill {
  100% {
    stroke-dashoffset: var(--gauge-dash-offset);
  }
}

.gauge-background-path {
  fill: none;
  stroke: var(--looc-teal-deep);
  stroke-width: 45px;
  stroke-dashoffset: var(--gauge-dash-offset);
}

img.arrow {
  width: 10px;
  height: 10px;
  align-self: start;
  top: 10%;
  position: relative;
}

/* -----------------------------------------------------------------------------
   Bar graphs
   ----------------------------------------------------------------------------- */

/* The bars are sized as a percentage of this shell, so it needs a definite height to resolve them against.
   overflow is hidden rather than auto: a month of hourly prices used to open a silent horizontal scrollbar
   inside a card on a page that scrolls vertically. The bars share the available width instead. */
.looc-bar-graph {
  overflow: hidden;
  height: 120px;
  flex-direction: row;
  gap: 1px;
  border-bottom: solid 1px var(--looc-blue);
}

  .looc-bar-graph > div {
    flex: 1 1 0;
    min-width: 1px;
  }

  /* A single-series bar: one div per point, grown up from the baseline. */
  .looc-bar-graph > div.foreground {
    background-color: var(--looc-blue);
    align-self: end;
  }

  /* A price point: contract and market drawn as siblings on one scale, the market bar narrower and in
     front. They used to be nested, which made the inner bar a percentage of the outer one and let it
     spill out of the card whenever the market price rose above the contract price. */
  .looc-bar-graph > .price-column {
    position: relative;
    height: 100%;
  }

    .looc-bar-graph .price-column > .background {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(0deg, var(--looc-teal-deep) 0%, var(--looc-teal-dark) 100px);
      border-top: solid 1px var(--looc-teal);
    }

    .looc-bar-graph .price-column > .foreground {
      position: absolute;
      bottom: 0;
      left: 25%;
      right: 25%;
      background-color: var(--looc-blue);
    }

/* -----------------------------------------------------------------------------
   Market price triplet
   ----------------------------------------------------------------------------- */

.price-triplet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

  .price-triplet > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .price-triplet > div:nth-child(2) {
    align-items: center;
  }

  .price-triplet > div:last-child {
    align-items: flex-end;
  }

.price-triplet-label {
  color: var(--looc-muted);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-triplet-current {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 24px;
}

/* -----------------------------------------------------------------------------
   Tables
   ----------------------------------------------------------------------------- */

.centered-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.pager-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--looc-tap-target);
  height: var(--looc-tap-target);
  border-radius: 50%;
  background-color: var(--looc-surface);
  border: 1px solid var(--looc-border);
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.pager-nav-arrow:hover:not(:disabled) {
  background-color: rgba(var(--looc-teal-rgb), 0.15);
  border-color: rgba(var(--looc-teal-rgb), 0.4);
}

.pager-nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.pager-nav-arrow img {
  width: 14px;
  height: 14px;
}

.pager-nav-arrow.previous img {
  transform: rotate(-90deg);
}

.pager-nav-arrow.next img {
  transform: rotate(90deg);
}

.pager-label {
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  min-width: 110px;
  text-align: center;
}

/* Header and rows share one grid, so the column headings actually sit over their values. */
.four-column-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: baseline;
}

.four-column-row > span {
  overflow-wrap: anywhere;
  text-align: center;
}

.four-column-row > span:first-child {
  text-align: left;
}

.four-column-row > span:last-child {
  text-align: right;
}

.simple-table-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: baseline;
}

.simple-table-row > span {
  overflow-wrap: anywhere;
}

.simple-table-row > span:nth-child(2) {
  text-align: center;
}

.simple-table-row > span:last-child {
  text-align: right;
}

.table-column-header {
  color: var(--looc-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-row-label {
  display: none;
  color: var(--looc-muted);
  font-weight: 400;
  font-size: 12px;
}

/* Four columns of formatted currency wrap mid-number on a phone. Below 480px the shared column header is
   dropped - it no longer sits over anything - and each cell carries its own name inline instead. */
@media (max-width: 479px) {
  .four-column-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2px;
    padding-bottom: 8px;
  }

  /* One column, with the row title lifted to the top so it reads as a small card. */
  .simple-table-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
    padding-bottom: 8px;
  }

  .simple-table-row > span:nth-child(2) {
    order: -1;
  }

  .four-column-row > span,
  .simple-table-row > span {
    text-align: left !important;
  }

  .table-row-label {
    display: inline;
  }

  .four-column-header,
  .simple-table-header {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Bottom tab bar
   ----------------------------------------------------------------------------- */

/* The five screens used to live nested inside the drawer "Dashboard" item, which meant opening the drawer
   and expanding a disclosure to reach any of them. On a phone they are tabs. */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--looc-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--looc-tabbar-height);
  padding: 6px 2px;
  text-decoration: none;
  color: var(--looc-grey-light);
  font-size: 11px;
  font-weight: 600;
}

/* The icon set is drawn with black strokes, so it has to be inverted to be visible at all on this
   background - the same reason the old footer rule carried a filter chain. */
.bottom-nav a img {
  width: 22px;
  height: 22px;
  filter: invert(1);
  opacity: 0.6;
}

.bottom-nav a.active {
  color: var(--looc-teal);
}

.bottom-nav a.active img {
  opacity: 1;
}

/* The dashboard tab uses the brand mark, which is already in colour and must not be inverted. */
.bottom-nav a img.brand-icon {
  filter: none;
}

/* Room for the bar, plus the home indicator on a notched phone. This replaces the old
   `.page-block:last-of-type { margin-bottom: 50px !important }`, which cleared a footer that no
   longer existed. */
.container {
  padding-bottom: calc(var(--looc-tabbar-height) + env(safe-area-inset-bottom) + 16px);
}

/* Above this width the drawer is the navigation and the tab bar would be a second, redundant one. */
@media (min-width: 900px) {
  .bottom-nav {
    display: none;
  }

  .container {
    padding-bottom: 32px;
  }
}

/* -----------------------------------------------------------------------------
   Header chrome
   ----------------------------------------------------------------------------- */

/* The organization dropdown had a hard 220px floor, which pushed the user name and the log-out button off
   a 360px header row. */
.organization-switcher {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 220px;
}

/* Below this the header keeps the switcher and the log-out control but drops the name, which is the one
   part of the row that carries no action. */
@media (max-width: 639px) {
  .login-display-name {
    display: none;
  }
}