/**
 * Page-specific styles
 * miner-inventory-technician-app
 */

/* ========================================
   Login Page
   ======================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-secondary);
}

.login-page__logo {
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-lg);
}

.login-page__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.login-page__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-form {
  width: 100%;
  max-width: 360px;
  background-color: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.login-form__error {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* ========================================
   Tasks Page
   ======================================== */
.tasks-page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.tasks-page__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.tasks-page__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.tasks-page__location {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background-color: var(--bg-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
}

.tasks-page__location svg {
  flex-shrink: 0;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ========================================
   Scan Page
   ======================================== */
.scan-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.scan-page__progress {
  padding: var(--spacing-md);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.scan-page__progress-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.scan-page__progress-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.scan-page__main {
  flex: 1;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.scan-page__item-number {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.scan-page__item-number-value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.scan-page__item-number-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.scan-page__step {
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.scan-page__step-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
}

.scan-page__expected {
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
}

.scan-page__expected-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-page__expected-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  font-family: monospace;
}

.scan-page__scanned {
  padding: var(--spacing-md);
  background-color: var(--color-success-light);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-md);
}

.scan-page__scanned--error {
  background-color: var(--color-error-light);
}

.scan-page__scanned-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.scan-page__scanned-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-family: monospace;
}

.scan-page__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.scan-page__info-item {
  padding: var(--spacing-md);
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.scan-page__info-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-page__info-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: monospace;
}

.scan-page__bottom {
  padding: var(--spacing-md);
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--spacing-sm);
}

/* Hashrate Input */
.hashrate-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.hashrate-input__field {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-xl);
}

.hashrate-input__unit {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========================================
   Complete Page
   ======================================== */
.complete-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
}

.complete-page__header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.complete-page__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-success-light);
  color: var(--color-success);
  font-size: 40px;
}

.complete-page__icon--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.complete-page__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}

.complete-page__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.complete-page__stats {
  margin-bottom: var(--spacing-xl);
}

.complete-page__section {
  margin-bottom: var(--spacing-xl);
}

.complete-page__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
}

.complete-page__list {
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.complete-page__list-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.complete-page__list-item:last-child {
  border-bottom: none;
}

.complete-page__list-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

.complete-page__list-icon--mismatch {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

.complete-page__list-icon--skipped {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.complete-page__list-content {
  flex: 1;
  min-width: 0;
}

.complete-page__list-title {
  font-weight: var(--font-weight-medium);
}

.complete-page__list-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-family: monospace;
}

.complete-page__footer {
  margin-top: auto;
  padding-top: var(--spacing-xl);
}

/* ========================================
   Result Overlay
   ======================================== */
.result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: fadeIn var(--transition-fast) ease;
}

.result-overlay--match {
  background-color: var(--color-success);
}

.result-overlay--mismatch {
  background-color: var(--color-error);
}

.result-overlay--skipped {
  background-color: var(--color-warning);
}

.result-overlay__icon {
  font-size: 80px;
  color: var(--text-inverse);
  margin-bottom: var(--spacing-md);
}

.result-overlay--skipped .result-overlay__icon {
  color: var(--text-primary);
}

.result-overlay__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
  margin-bottom: var(--spacing-sm);
}

.result-overlay--skipped .result-overlay__title {
  color: var(--text-primary);
}

.result-overlay__message {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
}

.result-overlay--skipped .result-overlay__message {
  color: var(--text-secondary);
}

.result-overlay__details {
  margin-top: var(--spacing-lg);
  text-align: center;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
}

.result-overlay--skipped .result-overlay__details {
  color: var(--text-secondary);
}

/* ========================================
   Scanner Focus Mode
   ======================================== */
.scanner-focus {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  z-index: var(--z-modal);
}

.scanner-focus__title {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.scanner-focus__input {
  width: 100%;
  max-width: 300px;
  padding: var(--spacing-lg);
  font-size: var(--font-size-2xl);
  text-align: center;
  background-color: var(--bg-secondary);
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

.scanner-focus__hint {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ========================================
   Skipped Mode Banner
   ======================================== */
.scan-page__mode-banner {
  background-color: var(--color-warning);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
}

.scan-page__mode-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.scan-page__mode-count {
  background-color: var(--text-primary);
  color: var(--color-warning);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ========================================
   Skipped Items List
   ======================================== */
.scan-page__skipped-list {
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.scan-page__skipped-list-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-page__skipped-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.scan-page__skipped-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.scan-page__skipped-item:hover {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

.scan-page__skipped-item--active {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

.scan-page__skipped-item-number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.scan-page__skipped-item-model {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}