/* GT7 Theme Editor mock preview: the Access and Advanced Access app family. Every value measured on
   the real app at 480 x 272 and 320 x 240; the 15 --g7-* variables are consumed where the real app
   consumes them. */

:root {
  --g7-color-yes: #21891f;
  --g7-color-no: #e22f22;
  --g7-color-active: #229edf;
  --g7-color-warning: #ed6c02;
  --g7-color-disabled: #959595;
  --g7-background-color: #303030;
  --g7-text-color: #f2f2f2;
  --g7-text-color-active: var(--g7-color-active);
  --g7-border-radius: 7px;
  --g7-border-width: 1px;
  --g7-border-color: #9b9b9b;
  --g7-border-color-active: var(--g7-color-active);
  --g7-button-background-color: #404040a0;
  --g7-button-background-color-active: #229edf80;
  --g7-font-size: 6vw;
  /* the idle screen's logo layer: Gantner's default logo as the terminal ships it (owner decision 2026-09-24;
     the mark is Gantner's trademark, see the page footer); a theme replaces it through --g7-default-background-image */
  --g7-default-background-image: url("gantner-logo.svg");
}

body {
  background-color: var(--g7-background-color);
  color: var(--g7-text-color);
  font-size: var(--g7-font-size);
  font-weight: 400;
  line-height: calc(var(--g7-font-size) * 1.2); /* computed to px, so larger texts keep the body line box like the real app */
}

.text-medium { font-size: var(--g7-font-size); line-height: calc(var(--g7-font-size) * 1.2); }
.text-medium-large, .text-large { font-size: calc(var(--g7-font-size) * 1.5); }

/* buttons: single-class rule like the real app, so a theme's literal .g7-button rule wins the cascade */
.g7-button {
  background-color: var(--g7-button-background-color);
  border: var(--g7-border-width) solid var(--g7-border-color);
  border-radius: var(--g7-border-radius);
  cursor: pointer;
}

/* ---- Leisure: idle ---- */
.g7-idle-default-background { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; background-image: var(--g7-default-background-image); background-repeat: no-repeat; background-position: center; background-size: 70vh auto; }
.g7-idle-bg { padding: 4px; }
.g7-idle-language { display: block; }

/* ---- Leisure: message screens (granted, denied, locked, error) ---- */
.g7-symbol-icon { font-size: 7vh; }
.g7-unlock-icon, .g7-success-icon { color: var(--g7-color-yes); }
.g7-deny-icon, .g7-error-icon, .g7-locked-icon { color: var(--g7-color-no); }

/* ---- Leisure: confirm ---- */
.g7-confirm-yes, .g7-confirm-no { border-width: 0; }
.g7-confirm-yes { background-color: var(--g7-color-yes); }
.g7-confirm-no { background-color: var(--g7-color-no); }

/* ---- Leisure: number entry ---- */
.icons-top { margin-bottom: auto; }
.icons-bottom { margin-top: auto; }
.pin-display { margin-left: 4px; }
.text-active { color: var(--g7-text-color-active); }
.g7-number-btn-1 { display: block; }
.g7-number-key { display: flex; align-items: center; justify-content: center; }

/* ---- Leisure: selection (a table with 4px spacing, taller than the screen when it has many rows) ---- */
.g7-scroll-container { overflow: hidden auto; }
.g7-selection-bg table { border-collapse: separate; border-spacing: 4px; font-size: 16px; line-height: normal; }
.g7-selection-bg td { padding: 8px 1px; vertical-align: middle; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }