/* Container styles */
/* line 2, app/assets/stylesheets/bundy_clock.scss */
.bundy-clock-container {
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* Time display */
/* line 8, app/assets/stylesheets/bundy_clock.scss */
.time-text {
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 1.2;
  transition: font-size 0.3s ease;
}

/* Camera container */
/* line 16, app/assets/stylesheets/bundy_clock.scss */
.camera-wrapper {
  background-color: #000;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}

/* line 26, app/assets/stylesheets/bundy_clock.scss */
.camera-wrapper video,
.camera-wrapper img {
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}

/* Number pad */
/* line 35, app/assets/stylesheets/bundy_clock.scss */
.number-pad {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

/* line 40, app/assets/stylesheets/bundy_clock.scss */
.number-pad .btn {
  border-radius: 12px;
  transition: all 0.2s ease;
  font-weight: 500;
  min-height: 65px;
  font-size: 1.5rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* line 48, app/assets/stylesheets/bundy_clock.scss */
.number-pad .btn:active {
  transform: scale(0.95);
}

/* line 53, app/assets/stylesheets/bundy_clock.scss */
.number-pad .row {
  display: flex;
  justify-content: space-between;
}

/* Employee number input */
/* line 60, app/assets/stylesheets/bundy_clock.scss */
.employee-no-input {
  margin-bottom: 20px;
}

/* line 63, app/assets/stylesheets/bundy_clock.scss */
.employee-no-input input {
  font-size: 1.75rem !important;
  padding: 1rem;
  text-align: center;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.98);
  margin-bottom: 1rem;
}

/* Clock in/out buttons */
/* line 74, app/assets/stylesheets/bundy_clock.scss */
.clock-btn {
  border-radius: 12px;
  transition: all 0.3s ease;
  min-height: 85px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 1.75rem !important;
}

/* line 83, app/assets/stylesheets/bundy_clock.scss */
.clock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* line 88, app/assets/stylesheets/bundy_clock.scss */
.clock-btn:active {
  transform: translateY(1px);
}

/* Attendance photos */
/* line 94, app/assets/stylesheets/bundy_clock.scss */
.img-thumbnail {
  max-width: 100px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s;
}

/* line 100, app/assets/stylesheets/bundy_clock.scss */
.img-thumbnail:hover {
  transform: scale(1.1);
}

/* Table cell alignment for images */
/* line 106, app/assets/stylesheets/bundy_clock.scss */
td .img-thumbnail {
  display: block;
  margin: 0 auto;
}

/* FancyBox customization */
/* line 112, app/assets/stylesheets/bundy_clock.scss */
.fancybox__container {
  --fancybox-bg: rgba(0, 0, 0, 0.9);
}

/* line 116, app/assets/stylesheets/bundy_clock.scss */
.fancybox__content {
  padding: 0;
  background: transparent;
}

/* Responsive styles */
@media (max-width: 768px) {
  /* line 123, app/assets/stylesheets/bundy_clock.scss */
  .time-text {
    font-size: 3rem;
  }
  /* line 127, app/assets/stylesheets/bundy_clock.scss */
  .bundy-clock-container {
    padding: 1.5rem !important;
  }
  /* line 131, app/assets/stylesheets/bundy_clock.scss */
  .clock-btn {
    min-height: 75px;
    font-size: 1.5rem !important;
  }
  /* line 136, app/assets/stylesheets/bundy_clock.scss */
  .number-pad .btn {
    min-height: 60px;
    font-size: 1.25rem !important;
  }
}

@media (max-width: 576px) {
  /* line 143, app/assets/stylesheets/bundy_clock.scss */
  .time-text {
    font-size: 2.5rem;
  }
  /* line 147, app/assets/stylesheets/bundy_clock.scss */
  .bundy-clock-container {
    padding: 1rem !important;
  }
  /* line 151, app/assets/stylesheets/bundy_clock.scss */
  .employee-no-input input {
    font-size: 1.5rem !important;
    padding: 0.75rem;
  }
  /* line 156, app/assets/stylesheets/bundy_clock.scss */
  .number-pad .btn {
    min-height: 55px;
    font-size: 1.25rem !important;
  }
  /* line 161, app/assets/stylesheets/bundy_clock.scss */
  .clock-btn {
    min-height: 70px;
    font-size: 1.25rem !important;
    padding: 0.75rem !important;
  }
  /* line 167, app/assets/stylesheets/bundy_clock.scss */
  .camera-wrapper {
    min-height: 180px;
  }
  /* line 170, app/assets/stylesheets/bundy_clock.scss */
  .camera-wrapper video,
.camera-wrapper img {
    max-width: 240px;
  }
}

/* Very small devices */
@media (max-width: 320px) {
  /* line 179, app/assets/stylesheets/bundy_clock.scss */
  .time-text {
    font-size: 2rem;
  }
  /* line 183, app/assets/stylesheets/bundy_clock.scss */
  .bundy-clock-container {
    padding: 0.75rem !important;
  }
  /* line 187, app/assets/stylesheets/bundy_clock.scss */
  .employee-no-input input {
    font-size: 1.25rem !important;
    padding: 0.5rem;
  }
  /* line 192, app/assets/stylesheets/bundy_clock.scss */
  .number-pad .btn {
    min-height: 50px;
    font-size: 1rem !important;
    padding: 0.5rem !important;
  }
  /* line 198, app/assets/stylesheets/bundy_clock.scss */
  .clock-btn {
    min-height: 60px;
    font-size: 1.1rem !important;
    padding: 0.5rem !important;
  }
  /* line 204, app/assets/stylesheets/bundy_clock.scss */
  .camera-wrapper {
    min-height: 160px;
  }
  /* line 207, app/assets/stylesheets/bundy_clock.scss */
  .camera-wrapper video,
.camera-wrapper img {
    max-width: 200px;
  }
}