/*
 * Saare Kütus iseteenindus: rakenduse stiilid Bootstrap 5 peal.
 * Visuaalne identiteet: Lehe raamistikud FR-020, ADR 0011.
 * Allikas on kinnitatud prototüübi stiil docs/prototype/assets/css/app.css.
 * Inline-stiile ei kasutata (CSP), kõik lehe kujundus on siin või Bootstrapi utiliitklassides.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/inter-4.1/InterVariable.woff2") format("woff2");
}

:root {
  --sk-brand: #337ab7;
  --sk-brand-rgb: 51, 122, 183;
  --sk-brand-dark: #286090;
  --sk-brand-tint: #eaf1f8;
  --sk-ink: #1d2733;
  --sk-muted: #5c6b7a;
  --sk-line: #dde4ec;
  --sk-line-soft: #edf1f5;
  --sk-surface: #ffffff;
  --sk-ground: #f5f8fb;
  --sk-hover: #000000;
  --sk-ok-bg: #e7f4ec;
  --sk-ok-fg: #1e6b3d;
  --sk-ok-line: #b9dfc8;
  --sk-warn-bg: #fff6e0;
  --sk-warn-fg: #7a5600;
  --sk-warn-line: #f3d98b;
  --sk-err-bg: #fbeaea;
  --sk-err-fg: #9b2226;
  --sk-err-line: #f0c2c3;
  --sk-radius: 10px;
  --sk-shadow: 0 1px 2px rgba(29, 39, 51, .06), 0 4px 16px rgba(29, 39, 51, .06);
  --sk-shadow-lg: 0 10px 30px rgba(29, 39, 51, .16);

  --bs-primary: var(--sk-brand);
  --bs-primary-rgb: var(--sk-brand-rgb);
  --bs-primary-text-emphasis: var(--sk-brand-dark);
  --bs-primary-bg-subtle: var(--sk-brand-tint);
  --bs-primary-border-subtle: #b9d0e6;
  --bs-body-font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--sk-ink);
  --bs-body-color-rgb: 29, 39, 51;
  --bs-body-bg: var(--sk-ground);
  --bs-secondary-color: var(--sk-muted);
  --bs-border-color: var(--sk-line);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--sk-radius);
  --bs-link-color: var(--sk-brand);
  --bs-link-color-rgb: var(--sk-brand-rgb);
  --bs-link-hover-color: var(--sk-hover);
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-focus-ring-color: rgba(var(--sk-brand-rgb), .35);
}

body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  text-decoration: none;
}

h1, h2, h3, .h1, .h2, .h3 {
  color: var(--sk-brand);
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: 1.6rem;
  font-weight: 700;
}

h2, .h2 {
  font-size: 1.15rem;
  font-weight: 650;
}

h3, .h3 {
  font-size: 1.02rem;
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid rgba(var(--sk-brand-rgb), .45);
  outline-offset: 2px;
}

.text-muted,
.form-text {
  color: var(--sk-muted) !important;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.app-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

/* Nupud ja vormid */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.btn-sm {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .375rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--sk-brand);
  --bs-btn-border-color: var(--sk-brand);
  --bs-btn-hover-bg: var(--sk-brand-dark);
  --bs-btn-hover-border-color: var(--sk-brand-dark);
  --bs-btn-active-bg: var(--sk-brand-dark);
  --bs-btn-active-border-color: var(--sk-brand-dark);
  --bs-btn-disabled-bg: var(--sk-brand);
  --bs-btn-disabled-border-color: var(--sk-brand);
  --bs-btn-focus-shadow-rgb: var(--sk-brand-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--sk-brand);
  --bs-btn-bg: var(--sk-surface);
  --bs-btn-border-color: var(--sk-line);
  --bs-btn-hover-color: var(--sk-hover);
  --bs-btn-hover-bg: var(--sk-surface);
  --bs-btn-hover-border-color: var(--sk-brand);
  --bs-btn-active-color: var(--sk-hover);
  --bs-btn-active-bg: var(--sk-brand-tint);
  --bs-btn-active-border-color: var(--sk-brand);
  --bs-btn-disabled-color: var(--sk-muted);
  --bs-btn-disabled-bg: var(--sk-ground);
  --bs-btn-disabled-border-color: var(--sk-line);
  --bs-btn-focus-shadow-rgb: var(--sk-brand-rgb);
}

.btn-danger {
  --bs-btn-bg: #b02a2f;
  --bs-btn-border-color: #b02a2f;
  --bs-btn-hover-bg: var(--sk-err-fg);
  --bs-btn-hover-border-color: var(--sk-err-fg);
  --bs-btn-active-bg: var(--sk-err-fg);
  --bs-btn-active-border-color: var(--sk-err-fg);
}

.form-label {
  font-weight: 500;
  font-size: .875rem;
  margin-bottom: .375rem;
}

.form-control,
.form-select {
  border-color: #c9d3de;
  border-radius: 8px;
  padding: .625rem .75rem;
}

/* Bootstrapi parem täidis jätab ruumi valiku noolele, nii et tekst ei jää noole alla. */
.form-select {
  padding-right: 2.25rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sk-brand);
  box-shadow: 0 0 0 3px rgba(var(--sk-brand-rgb), .2);
}

.form-check-input:checked {
  background-color: var(--sk-brand);
  border-color: var(--sk-brand);
}

.form-check-input:focus {
  border-color: var(--sk-brand);
  box-shadow: 0 0 0 3px rgba(var(--sk-brand-rgb), .2);
}

.app-code-input {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .3em;
  max-width: 14rem;
}

/* Kaardid, paneelid ja modaalid */

.card {
  --bs-card-border-color: var(--sk-line);
  --bs-card-border-radius: var(--sk-radius);
  --bs-card-inner-border-radius: calc(var(--sk-radius) - 1px);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-bg: var(--sk-surface);
  box-shadow: var(--sk-shadow);
  min-width: 0;
}

.modal {
  --bs-modal-border-color: var(--sk-line);
  --bs-modal-border-radius: var(--sk-radius);
  --bs-modal-header-border-color: var(--sk-line);
  --bs-modal-footer-border-color: var(--sk-line);
}

.modal-title {
  color: var(--sk-brand);
  font-size: 1.15rem;
  font-weight: 650;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--sk-line);
  --bs-dropdown-border-radius: var(--sk-radius);
  --bs-dropdown-link-active-bg: var(--sk-brand);
  box-shadow: var(--sk-shadow-lg);
}

/* Navigatsiooniriba */

.app-navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .55);
  --bs-navbar-toggler-focus-width: 3px;
  background: var(--sk-brand);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  min-height: 64px;
}

.app-navbar > .container {
  min-height: 64px;
}

.app-brand {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  white-space: nowrap;
  margin-right: 1rem;
}

.app-brand b {
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .9375rem;
}

.app-brand span {
  font-weight: 400;
  font-size: .9375rem;
  opacity: .85;
  padding-left: .625rem;
  border-left: 1px solid rgba(255, 255, 255, .4);
}

.app-brand-mobile {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  font-size: .9375rem;
}

.app-navbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  padding: .5rem .75rem;
  border-radius: 8px;
  white-space: nowrap;
  text-align: left;
}

.app-navbtn:hover,
.app-navbtn:focus-visible,
.app-navbtn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.app-navbtn small {
  display: block;
  font-size: .6875rem;
  opacity: .8;
  line-height: 1.2;
}

.app-navbtn .app-navbtn-label {
  line-height: 1.25;
}

.app-navbtn-outline {
  border-color: rgba(255, 255, 255, .55);
}

.app-role-menu {
  min-width: 260px;
  padding: .375rem;
}

.app-role-menu .dropdown-header {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

.app-role-menu .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  border-radius: 7px;
  padding: .5625rem .75rem;
}

.app-role-menu .dropdown-item small {
  display: block;
  color: var(--sk-muted);
  font-size: .75rem;
}

.app-role-menu .dropdown-item .bi-check-lg {
  color: var(--sk-brand);
}

.app-role-menu .dropdown-item:hover,
.app-role-menu .dropdown-item:focus-visible {
  background: var(--sk-brand);
  color: #fff;
}

.app-role-menu .dropdown-item:hover small,
.app-role-menu .dropdown-item:focus-visible small,
.app-role-menu .dropdown-item:hover .bi-check-lg,
.app-role-menu .dropdown-item:focus-visible .bi-check-lg {
  color: #fff;
}

@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse {
    padding: .5rem 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }

  .app-navbar .app-role-menu {
    position: static;
    margin-top: .375rem;
  }

  .app-navbtn {
    width: 100%;
  }
}

/* Sisu */

.app-main {
  padding-top: 1.75rem;
  padding-bottom: 7.5rem;
}

.app-page-head p {
  margin: .25rem 0 0;
  color: var(--sk-muted);
}

/* Alammenüü */

.app-submenu {
  gap: .375rem;
  flex-wrap: wrap;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  padding: .375rem;
}

.app-submenu a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: 7px;
  color: var(--sk-ink);
  font-weight: 500;
}

.app-submenu a .bi {
  color: var(--sk-brand);
}

.app-submenu a:hover {
  background: var(--sk-brand-tint);
  color: var(--sk-hover);
}

.app-submenu a[aria-current="page"] {
  background: var(--sk-brand);
  color: #fff;
}

.app-submenu a[aria-current="page"] .bi {
  color: #fff;
}

/* Teavitused */

.app-alerts {
  display: grid;
  gap: .625rem;
}

.app-alerts .alert {
  margin-bottom: 0;
}

.alert {
  --bs-alert-border-radius: var(--sk-radius);
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.alert > .bi:first-child {
  font-size: 1.25rem;
  line-height: 1.2;
  flex: none;
}

.alert .app-alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

.alert .app-alert-body p {
  margin: 0;
}

.alert .app-alert-body ul {
  margin: .375rem 0 0;
  padding-left: 1.125rem;
}

.alert a,
.alert .alert-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert a:hover {
  color: var(--sk-hover);
}

.alert-dismissible {
  padding-right: 1rem;
}

.alert-dismissible .btn-close {
  position: static;
  flex: none;
  padding: .25rem;
  margin: -.125rem -.25rem 0 0;
}

.alert-info {
  --bs-alert-color: #fff;
  --bs-alert-bg: var(--sk-brand);
  --bs-alert-border-color: var(--sk-brand-dark);
}

.alert-info a:hover {
  color: #fff;
}

.alert-info .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.alert-success {
  --bs-alert-color: var(--sk-ok-fg);
  --bs-alert-bg: var(--sk-ok-bg);
  --bs-alert-border-color: var(--sk-ok-line);
}

.alert-warning {
  --bs-alert-color: var(--sk-warn-fg);
  --bs-alert-bg: var(--sk-warn-bg);
  --bs-alert-border-color: var(--sk-warn-line);
}

.alert-danger {
  --bs-alert-color: var(--sk-err-fg);
  --bs-alert-bg: var(--sk-err-bg);
  --bs-alert-border-color: var(--sk-err-line);
}

.app-message-text {
  white-space: pre-line;
}

/* Ülevaate ikoonikaardid */

.app-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.app-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  color: var(--sk-ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.app-tile b {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
}

.app-tile small {
  color: var(--sk-muted);
}

.app-tile-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sk-brand-tint);
  color: var(--sk-brand);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  transition: background .15s, color .15s;
}

.app-tile:hover,
.app-tile:focus-visible {
  border-color: var(--sk-brand);
  box-shadow: var(--sk-shadow);
  color: var(--sk-ink);
  transform: translateY(-1px);
}

.app-tile:hover .app-tile-icon,
.app-tile:focus-visible .app-tile-icon {
  background: var(--sk-brand);
  color: #fff;
}

.app-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
}

.app-contacts a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
}

@media (max-width: 991.98px) {
  .app-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .app-tiles {
    grid-template-columns: 1fr;
  }
}

/* Kontaktplokid (kontakt, hooldus, piirangud, avaldus) */

.app-contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.app-contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  color: var(--sk-ink);
}

.app-contact-card b {
  display: block;
  font-weight: 600;
}

.app-contact-card small {
  color: var(--sk-muted);
}

.app-contact-card:hover,
.app-contact-card:focus-visible {
  border-color: var(--sk-brand);
  color: var(--sk-ink);
}

.app-contact-card .app-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
}

.app-contact-card:hover .app-tile-icon,
.app-contact-card:focus-visible .app-tile-icon {
  background: var(--sk-brand);
  color: #fff;
}

.app-address {
  font-style: normal;
  line-height: 1.7;
}

/* Tanklate kaart: lehe laiune, kõrgus sobib lauaarvutisse ja mobiili (FR-002) */

.app-station-map {
  height: clamp(420px, 75vh, 700px);
  overflow: hidden;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
}

.app-station-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.app-station-map-consent {
  max-width: 40rem;
}

/* Uue kliendi avaldus: lõksväli on inimese eest peidetud, aga jääb vormi automaatikale (BR-004) */

.app-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sisselogimine */

.app-narrow {
  max-width: 520px;
  margin: 0 auto;
}

.app-methods {
  --bs-accordion-border-color: var(--sk-line);
  --bs-accordion-border-radius: var(--sk-radius);
  --bs-accordion-inner-border-radius: calc(var(--sk-radius) - 1px);
  --bs-accordion-btn-padding-x: 1.125rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--sk-ink);
  --bs-accordion-active-color: var(--sk-ink);
  --bs-accordion-active-bg: var(--sk-surface);
  --bs-accordion-btn-focus-box-shadow: inset 0 0 0 3px rgba(var(--sk-brand-rgb), .35);
  --bs-accordion-body-padding-x: 1.125rem;
  --bs-accordion-body-padding-y: .25rem;
  background: var(--sk-surface);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
}

.app-methods .accordion-button {
  gap: .875rem;
}

.app-methods .accordion-button:hover {
  background: var(--sk-ground);
}

.app-methods .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.app-methods .accordion-button b {
  display: block;
  font-weight: 600;
}

.app-methods .accordion-button small {
  color: var(--sk-muted);
}

.app-method-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sk-brand-tint);
  color: var(--sk-brand);
  display: grid;
  place-items: center;
  flex: none;
  font-size: 1.125rem;
}

.app-methods .accordion-body {
  padding-bottom: 1.25rem;
  text-align: center;
}

.app-methods .accordion-body .form-control {
  margin-inline: auto;
  text-align: center;
}

.app-methods .accordion-body .app-code-input {
  text-indent: .3em;
}

.app-qr {
  width: 168px;
  height: 168px;
  border: 1px solid var(--sk-line);
  border-radius: 8px;
  background: #fff;
  image-rendering: pixelated;
}

.app-verification-code {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--sk-brand);
  line-height: 1.2;
}

/* Tarbimised */

.app-periods {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
}

.app-periods a {
  padding: .375rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--sk-line);
  background: var(--sk-surface);
  color: var(--sk-ink);
  font-weight: 500;
  font-size: .875rem;
}

.app-periods a:hover {
  border-color: var(--sk-brand);
  color: var(--sk-hover);
}

.app-periods a[aria-current="page"] {
  background: var(--sk-brand);
  border-color: var(--sk-brand);
  color: #fff;
}

.app-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  overflow: hidden;
  background: var(--sk-surface);
  margin: 0;
}

.app-summary > div {
  padding: 1rem 1.25rem;
  display: grid;
  gap: .125rem;
}

.app-summary > div + div {
  border-left: 1px solid var(--sk-line);
}

.app-summary dt {
  color: var(--sk-muted);
  font-size: .8125rem;
  font-weight: 400;
}

.app-summary dd {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.app-summary .app-summary-low dd {
  color: var(--sk-warn-fg);
}

.app-summary .app-summary-used dd {
  color: var(--sk-err-fg);
}

@media (max-width: 575.98px) {
  .app-summary {
    grid-template-columns: 1fr;
  }

  .app-summary > div + div {
    border-left: 0;
    border-top: 1px solid var(--sk-line);
  }
}

/* Tabeli nupud Prindi, PDF ja Excel (Tarbimised FR-006): DataTables paneb ikooni ja teksti span-i sisse. */
.dt-buttons .btn {
  --bs-btn-padding-x: 1.125rem;
}

.dt-buttons .btn > span {
  display: inline-flex;
  align-items: center;
}

.dt-buttons .btn .bi {
  padding-right: 5px;
}

.app-chart-scroll {
  overflow-x: auto;
  padding-bottom: .375rem;
}

.app-chart,
.app-chart-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(78px, 1fr));
  gap: .5rem;
  min-width: 100%;
}

.app-chart {
  height: 260px;
  align-items: end;
  border-bottom: 1px solid var(--sk-line);
}

.app-chart-col {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.app-chart-bar {
  width: 100%;
  min-height: 30px;
  background: var(--sk-brand);
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  padding-top: .4375rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.app-chart-months span {
  text-align: center;
  color: var(--sk-muted);
  font-size: .8125rem;
  padding-top: .375rem;
}

/* Tulba kõrgus 1% sammuga (Tarbimised FR-007): inline-stiile ei ole. 0 või negatiivse summa tulbal on min-height. */
.app-bar-h-0 { height: 0; }
.app-bar-h-1 { height: 1%; } .app-bar-h-2 { height: 2%; } .app-bar-h-3 { height: 3%; } .app-bar-h-4 { height: 4%; } .app-bar-h-5 { height: 5%; }
.app-bar-h-6 { height: 6%; } .app-bar-h-7 { height: 7%; } .app-bar-h-8 { height: 8%; } .app-bar-h-9 { height: 9%; } .app-bar-h-10 { height: 10%; }
.app-bar-h-11 { height: 11%; } .app-bar-h-12 { height: 12%; } .app-bar-h-13 { height: 13%; } .app-bar-h-14 { height: 14%; } .app-bar-h-15 { height: 15%; }
.app-bar-h-16 { height: 16%; } .app-bar-h-17 { height: 17%; } .app-bar-h-18 { height: 18%; } .app-bar-h-19 { height: 19%; } .app-bar-h-20 { height: 20%; }
.app-bar-h-21 { height: 21%; } .app-bar-h-22 { height: 22%; } .app-bar-h-23 { height: 23%; } .app-bar-h-24 { height: 24%; } .app-bar-h-25 { height: 25%; }
.app-bar-h-26 { height: 26%; } .app-bar-h-27 { height: 27%; } .app-bar-h-28 { height: 28%; } .app-bar-h-29 { height: 29%; } .app-bar-h-30 { height: 30%; }
.app-bar-h-31 { height: 31%; } .app-bar-h-32 { height: 32%; } .app-bar-h-33 { height: 33%; } .app-bar-h-34 { height: 34%; } .app-bar-h-35 { height: 35%; }
.app-bar-h-36 { height: 36%; } .app-bar-h-37 { height: 37%; } .app-bar-h-38 { height: 38%; } .app-bar-h-39 { height: 39%; } .app-bar-h-40 { height: 40%; }
.app-bar-h-41 { height: 41%; } .app-bar-h-42 { height: 42%; } .app-bar-h-43 { height: 43%; } .app-bar-h-44 { height: 44%; } .app-bar-h-45 { height: 45%; }
.app-bar-h-46 { height: 46%; } .app-bar-h-47 { height: 47%; } .app-bar-h-48 { height: 48%; } .app-bar-h-49 { height: 49%; } .app-bar-h-50 { height: 50%; }
.app-bar-h-51 { height: 51%; } .app-bar-h-52 { height: 52%; } .app-bar-h-53 { height: 53%; } .app-bar-h-54 { height: 54%; } .app-bar-h-55 { height: 55%; }
.app-bar-h-56 { height: 56%; } .app-bar-h-57 { height: 57%; } .app-bar-h-58 { height: 58%; } .app-bar-h-59 { height: 59%; } .app-bar-h-60 { height: 60%; }
.app-bar-h-61 { height: 61%; } .app-bar-h-62 { height: 62%; } .app-bar-h-63 { height: 63%; } .app-bar-h-64 { height: 64%; } .app-bar-h-65 { height: 65%; }
.app-bar-h-66 { height: 66%; } .app-bar-h-67 { height: 67%; } .app-bar-h-68 { height: 68%; } .app-bar-h-69 { height: 69%; } .app-bar-h-70 { height: 70%; }
.app-bar-h-71 { height: 71%; } .app-bar-h-72 { height: 72%; } .app-bar-h-73 { height: 73%; } .app-bar-h-74 { height: 74%; } .app-bar-h-75 { height: 75%; }
.app-bar-h-76 { height: 76%; } .app-bar-h-77 { height: 77%; } .app-bar-h-78 { height: 78%; } .app-bar-h-79 { height: 79%; } .app-bar-h-80 { height: 80%; }
.app-bar-h-81 { height: 81%; } .app-bar-h-82 { height: 82%; } .app-bar-h-83 { height: 83%; } .app-bar-h-84 { height: 84%; } .app-bar-h-85 { height: 85%; }
.app-bar-h-86 { height: 86%; } .app-bar-h-87 { height: 87%; } .app-bar-h-88 { height: 88%; } .app-bar-h-89 { height: 89%; } .app-bar-h-90 { height: 90%; }
.app-bar-h-91 { height: 91%; } .app-bar-h-92 { height: 92%; } .app-bar-h-93 { height: 93%; } .app-bar-h-94 { height: 94%; } .app-bar-h-95 { height: 95%; }
.app-bar-h-96 { height: 96%; } .app-bar-h-97 { height: 97%; } .app-bar-h-98 { height: 98%; } .app-bar-h-99 { height: 99%; } .app-bar-h-100 { height: 100%; }

/* Tabelid */

.app-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--sk-ground);
  --bs-table-border-color: var(--sk-line-soft);
  font-size: .90625rem;
  margin-bottom: 0;
}

.app-table > thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sk-muted);
  border-bottom-color: var(--sk-line);
  white-space: nowrap;
}

.app-table > :not(caption) > * > * {
  padding: .6875rem .75rem;
  vertical-align: middle;
}

.app-table td {
  white-space: nowrap;
}

.app-table td a:hover {
  text-decoration: underline;
}

.app-table > tfoot td {
  font-weight: 700;
  border-bottom: 0;
  border-top: 2px solid var(--sk-line);
}

.app-table .table-info {
  --bs-table-color: var(--sk-ink);
  --bs-table-bg: #d9edf7;
  --bs-table-border-color: #c4e0ee;
  --bs-table-hover-bg: #cde6f2;
  --bs-table-hover-color: var(--sk-ink);
}

.app-table .table-danger {
  --bs-table-color: var(--sk-err-fg);
  --bs-table-bg: #f2dede;
  --bs-table-border-color: #e9c9c9;
  --bs-table-hover-bg: #ecd3d3;
  --bs-table-hover-color: var(--sk-err-fg);
}

.app-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.app-table-toolbar .form-control {
  max-width: 260px;
  padding: .4375rem .75rem;
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--sk-brand-tint);
  color: var(--sk-brand-dark);
}

.app-status-danger {
  background: var(--sk-err-bg);
  color: var(--sk-err-fg);
}

/* Tanklate kaart */

.app-map {
  height: 640px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  background: var(--sk-brand-tint);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--sk-brand-dark);
  padding: 1.5rem;
}

.app-map .bi {
  font-size: 2.5rem;
}

.app-map-consent {
  background: var(--sk-surface);
  color: var(--sk-ink);
}

@media (max-width: 575.98px) {
  .app-map {
    height: 440px;
  }
}

/* Küpsiseteavitus */

.app-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--sk-surface);
  border-top: 1px solid var(--sk-line);
  box-shadow: 0 -8px 24px rgba(29, 39, 51, .08);
}

.app-cookie p {
  margin: 0;
  font-size: .875rem;
}

.app-cookie form {
  margin: 0;
}

.app-cookie .btn {
  min-width: 120px;
}

@media (max-width: 767.98px) {
  .app-cookie .app-cookie-actions {
    width: 100%;
  }

  .app-cookie .app-cookie-actions form,
  .app-cookie .app-cookie-actions .btn {
    flex: 1 1 0;
    width: 100%;
  }
}

/* Vealehed (400, 403, 404, 500): ilma raamistiketa */

.app-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.app-error-box {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.app-error-brand {
  display: inline-flex;
  align-items: baseline;
  gap: .625rem;
  color: var(--sk-brand);
  margin-bottom: 1.5rem;
}

.app-error-brand b {
  font-weight: 800;
  letter-spacing: .08em;
}

.app-error-brand span {
  padding-left: .625rem;
  border-left: 1px solid var(--sk-line);
  color: var(--sk-muted);
}

.app-error-code {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--sk-brand-tint);
  line-height: 1;
  -webkit-text-stroke: 1px var(--sk-brand);
  margin-bottom: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .app-tile,
  .app-tile-icon {
    transition: none;
  }
}