/* Fonts */
@font-face {
    font-family: LubalinGraphStd-Book;
    src: url(../fonts/LubalinGraphStd-Book.eot) format('embedded-opentype'),url(../fonts/LubalinGraphStd-Book.eot) format('embedded-opentype'),url(../fonts/LubalinGraphStd-Book.otf) format('otf'),url(../fonts/LubalinGraphStd-Book.svg) format('svg'),url(../fonts/LubalinGraphStd-Book.ttf) format('truetype'),url(../fonts/LubalinGraphStd-Book.woff) format('woff'),url(../fonts/LubalinGraphStd-Book.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: LubalinGraphStd-Demi;
    src: url(../fonts/LubalinGraphStd-Demi.eot) format('embedded-opentype'),url(../fonts/LubalinGraphStd-Demi.eot) format('embedded-opentype'),url(../fonts/LubalinGraphStd-Demi.otf) format('otf'),url(../fonts/LubalinGraphStd-Demi.svg) format('svg'),url(../fonts/LubalinGraphStd-Demi.ttf) format('truetype'),url(../fonts/LubalinGraphStd-Demi.woff) format('woff'),url(../fonts/LubalinGraphStd-Demi.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpticianSans;
    src: url(../fonts/Optiker-K.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Sehzeichen;
    src: url(../fonts/Sehzeichen.eot) format('embedded-opentype'),url(../fonts/Sehzeichen.eot) format('embedded-opentype'),url(../fonts/Sehzeichen.otf) format('otf'),url(../fonts/Sehzeichen.svg) format('svg'),url(../fonts/Sehzeichen.ttf) format('truetype'),url(../fonts/Sehzeichen.woff) format('woff'),url(../fonts/Sehzeichen.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Sloan;
    src: url(../fonts/Sloan.eot) format('embedded-opentype'),url(../fonts/Sloan.eot) format('embedded-opentype'),url(../fonts/Sloan.otf) format('otf'),url(../fonts/Sloan.svg) format('svg'),url(../fonts/Sloan.ttf) format('truetype'),url(../fonts/Sloan.woff) format('woff'),url(../fonts/Sloan.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Snellen;
    src: url(../fonts/Snellen.eot) format('embedded-opentype'),url(../fonts/Snellen.eot) format('embedded-opentype'),url(../fonts/Snellen.otf) format('otf'),url(../fonts/Snellen.svg) format('svg'),url(../fonts/Snellen.ttf) format('truetype'),url(../fonts/Snellen.woff) format('woff'),url(../fonts/Snellen.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

/* Global Variables */
:root {
  --primary-color: #1976D2;
  --secondary-color: #424242;
  --error-color: #FF5252;
  --success-color: #4CAF50;
  --warning-color: #FFC107;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.87);
}

/* Layout Utilities */
.full-height {
  height: 100vh;
}

.full-width {
  width: 100%;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Training Area Styles */
.training-area {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

.fixation-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: crosshair;
}

.training-text {
  position: absolute;
  transform: translate(-50%, -50%);
  user-select: none;
}

/* Responsive Design */
@media screen and (max-width: 600px) {
  .training-area {
    min-height: 300px;
  }
}

@media screen and (min-width: 1200px) {
  .training-area {
    min-height: 600px;
  }
}

/* High Contrast Theme */
.high-contrast {
  --primary-color: #FFFFFF !important;
  --secondary-color: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

.high-contrast .v-card {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
}

.high-contrast .v-btn {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

.high-contrast .v-text-field input,
.high-contrast .v-select .v-field__input {
  color: #FFFFFF !important;
  background-color: #000000 !important;
}

.high-contrast .v-field {
  border: 1px solid #FFFFFF !important;
}

/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Print Styles */
@media print {
  .no-print {
    display: none;
  }
  
  .training-area {
    border: 1px solid #000;
    box-shadow: none;
  }
}

/* Animation Utilities */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Vuetify Custom Styles */
.v-data-table__th:last-of-type > .v-data-table-header__content,
.v-data-table__tr > .v-data-table__td:last-of-type {
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
}

[v-cloak] { display: none; }
html { overflow-y: auto; }
canvas { cursor: crosshair; }
.fullscreen-canvas {
  /*
    width: 100vw;
    height: 100vh;
  */
    cursor: crosshair;
}
.fullscreen-canvas:active {
    cursor: grabbing;
}
.image-rendering-auto {
  image-rendering: auto;
}
.image-rendering-crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.image-rendering-pixelated {
  image-rendering: pixelated;
}
.timer-overlay {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 100;
    background: rgba(var(--v-theme-background), 0.9);
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.expandable textarea {
  field-sizing: content;          
}

.bounceEffect {
  animation: bounce 2s infinite;
  transform-origin: left;
}

@keyframes bounce {
	0%, 40%, 60%, 100% {transform: scale(1);}
	50% {transform: scale(1.2);}
}

/* Credit card calibration outline */
.credit-card-outline {
  width: 85.6mm;
  height: 53.98mm;
  border: 2px solid #333;
  background: rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  border-radius: 8px;
}