/* QC Kiosk - Main stylesheet */
@import '../../../public/css/theme.css';
@import 'kiosk/_base-components.css';
@import 'kiosk/_machine-cards.css';
@import 'kiosk/_data-display.css';
@import 'kiosk/_responsive.css';
@import 'kiosk/_touch-targets.css';
@import 'kiosk/_info-bar-portrait.css';
@import 'kiosk/_dash-tokens.css';
@import 'kiosk/_dash-components.css';

/* ===================================================================
   QC Kiosk Visual Identity
   Applies heading font, accent color, and background texture.
   =================================================================== */

/* Heading font for titles and section headers */
h1, h2, h3, h4, h5, h6,
.modal-overlay h2,
.machine-card .machine-name {
  font-family: var(--font-heading);
}

/* Background texture on page body */
body.bg-gray-100 {
  background-image: var(--bg-texture);
  background-repeat: repeat;
}

/* Accent color on primary action buttons */
.kiosk-btn-accent,
#qk-save-btn {
  background-color: var(--color-accent);
  color: white;
}

.kiosk-btn-accent:hover,
#qk-save-btn:hover {
  background-color: var(--color-accent-hover);
}

.machine-card .machine-icon {
  color: var(--color-accent);
}

/* Active states use dashboard blue */
.user-btn.selected {
  border-color: var(--color-blue-600);
  background: var(--color-blue-600);
}

.user-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

/* Defect button hover uses danger color */
.defect-btn:hover {
  border-color: var(--color-dash-danger);
  color: var(--color-dash-danger);
  background: color-mix(in srgb, var(--color-dash-danger) 10%, transparent);
}

/* FAI badge accent tint */
.fai-badge-active {
  background-color: var(--color-accent);
}

/* Modal title styling */
.modal-overlay h2 {
  letter-spacing: -0.01em;
}