/* FPS Service App — Mobile-first CSS
   Fair Print Solutions GmbH
   CI: Manrope | #009EE2 (Cyan-Blau) | #01274E (Navy)
   Quelle: D:\Claude\FairPrintSolutions\CI FPS\CI_Fair_Print_Solutions.md
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

:root {
  --primary:    #009EE2;  /* FPS Cyan-Blau — CTA, Buttons, Akzente */
  --primary-dk: #0088C8;  /* Hover-State */
  --dark-navy:  #01274E;  /* Hero/Section-Hintergrund */
  --header-dk:  #141C24;  /* Navigation */
  --success:    #16A34A;
  --warning:    #D97706;
  --danger:     #DC2626;
  --bg:         #F4F6FA;  /* FPS Light Background */
  --surface:    #FFFFFF;
  --border:     #E2E8F0;
  --text:       #1E293B;
  --text-light: #64748B;
  --radius:     12px;
  --shadow:     0 2px 8px rgba(0,0,0,.08);
  --btn-h:      56px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* Layout */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

.page--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.app-header img { height: 32px; }

.app-header h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

/* Logo Block (Login) */
.logo-block {
  text-align: center;
  margin-bottom: 32px;
}

.logo-block img {
  height: 48px;
  margin-bottom: 8px;
}

.logo-block h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.logo-block p {
  color: var(--text-light);
  font-size: 14px;
  margin-top: 4px;
}

/* Card */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.card--device {
  border-left: 4px solid var(--primary);
  padding: 16px 20px;
}

.card--device .device-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

.card--device .device-location {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 2px;
}

.card--device .device-meta {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 8px;
}

/* Form */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  height: var(--btn-h);
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s;
  -webkit-appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
}

.form-input::placeholder { color: var(--text-light); }

.form-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

/* Buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--btn-h);
  padding: 0 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus          { outline: none; }
.btn:focus-visible  { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:active { transform: scale(0.98); opacity: 0.9; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dk); }
.btn--dark    { background: var(--dark-navy); color: #fff; }
.btn--dark:hover { background: var(--header-dk); }

.btn--success { background: var(--success); color: #fff; }
.btn--danger  { background: var(--danger);  color: #fff; }
.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn--ghost {
  background: transparent;
  color: var(--text-light);
  font-weight: 400;
  font-size: 14px;
}

.btn--big {
  height: 72px;
  font-size: 18px;
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
}

.btn--big .btn-icon { font-size: 28px; line-height: 1; }
.btn--big .btn-label { font-size: 15px; font-weight: 700; }
.btn--big .btn-sub { font-size: 12px; font-weight: 400; opacity: 0.85; }

.btn + .btn { margin-top: 12px; }

/* Big Action Buttons (Home) */
.action-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}

.action-btn:active { transform: scale(0.98); }
.action-btn:hover  { border-color: var(--primary); }

.action-btn .ab-icon {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CMY Toner-Dots */
.dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--cyan    { background: radial-gradient(circle at 35% 35%, #5DE8FF, #009EE2); }
.dot--magenta { background: radial-gradient(circle at 35% 35%, #FF6EC4, #D0006F); }
.dot--yellow  { background: radial-gradient(circle at 35% 35%, #FFE566, #F5C800); }

.action-btn .ab-text h3 {
  font-size: 17px;
  font-weight: 700;
}

.action-btn .ab-text p {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 2px;
}

/* CMY Border-Akzente */
.action-btn--toner    { border-left: 4px solid #009EE2; }
.action-btn--reklama  { border-left: 4px solid #D0006F; }
.action-btn--report   { border-left: 4px solid #F5C800; }
.action-btn--toner:hover   { border-color: #009EE2; }
.action-btn--reklama:hover { border-color: #D0006F; }
.action-btn--report:hover  { border-color: #F5C800; }

/* Badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
}

.badge--warning { background: #FEF3C7; color: #92400E; }
.badge--success { background: #DCFCE7; color: #166534; }
.badge--danger  { background: #FEE2E2; color: #991B1B; }
.badge--info    { background: #DBEAFE; color: #1E40AF; }

/* Alert */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
}

.alert--error   { background: #FEE2E2; color: #991B1B; border-left: 3px solid var(--danger); }
.alert--success { background: #DCFCE7; color: #166534; border-left: 3px solid var(--success); }
.alert--warning { background: #FEF3C7; color: #92400E; border-left: 3px solid var(--warning); }
.alert--info    { background: #DBEAFE; color: #1E40AF; border-left: 3px solid var(--primary); }

/* Color Selector (Toner) */
.color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.color-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.color-btn .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.color-btn.selected {
  border-color: var(--primary);
  background: #EFF6FF;
}

.dot--BK     { background: #1a1a1a; border: 1px solid #555; }
.dot--C      { background: #00AEEF; }
.dot--M      { background: #EC008C; }
.dot--Y      { background: #FFD700; border: 1px solid #ccc; }
.dot--GERAET { background: linear-gradient(135deg, var(--primary), var(--dark-navy)); border-radius: 4px; }

/* Step Indicator */
.steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s;
}

.step-dot.active  { background: var(--primary); }
.step-dot.done    { background: var(--success); }

/* Photo Upload Area */
.photo-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
  background: var(--bg);
  margin-bottom: 12px;
  position: relative;
}

.photo-area:hover { border-color: var(--primary); }
.photo-area.has-photo { border-style: solid; border-color: var(--success); background: #F0FFF4; }

.photo-area input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.photo-area .photo-icon { font-size: 36px; margin-bottom: 8px; }
.photo-area .photo-label { font-size: 14px; font-weight: 600; color: var(--text-light); }
.photo-area .photo-sub   { font-size: 12px; color: var(--text-light); margin-top: 4px; }

.photo-preview {
  width: 100%;
  border-radius: 8px;
  display: none;
  max-height: 200px;
  object-fit: cover;
}

/* Overlay Frame (Kamera-Hilfe) */
.camera-guide {
  background: #000;
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Decision Tree */
.decision-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.decision-question {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
}

.decision-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.decision-help-text {
  background: #EFF6FF;
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 14px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--text);
}

.decision-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.decision-actions .btn {
  width: 100%;
  max-width: 280px;
}

/* Category Grid (Reklamation) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.cat-btn .cat-icon { font-size: 28px; }
.cat-btn:active { transform: scale(0.95); }
.cat-btn.selected { border-color: var(--danger); background: #FFF5F5; }

/* Success Screen */
.success-screen {
  text-align: center;
  padding: 32px 16px;
}

.success-icon { font-size: 64px; margin-bottom: 16px; }
.success-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.success-sub { font-size: 15px; color: var(--text-light); line-height: 1.6; }
.success-number {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: 700;
  margin: 16px 0;
  letter-spacing: 1px;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Section Title */
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-light);
  margin-bottom: 8px;
  margin-top: 4px;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Hide */
.hidden { display: none !important; }

/* Error state */
.form-input--error { border-color: var(--danger); }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; }

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Admin specific */
.tab-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-x: auto;
}

.tab-item {
  flex: 1;
  min-width: 80px;
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}

.tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content { display: none; padding: 16px; }
.tab-content.active { display: block; }

.list-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

.list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.list-item-title { font-weight: 700; font-size: 15px; }
.list-item-sub   { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.list-item-meta  { font-size: 12px; color: var(--text-light); }

.status-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  cursor: pointer;
}

/* ── Artikel-Karten (Toner bestellen) ────────────────────────── */
.artikel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.artikel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.artikel-card.selected {
  border-color: var(--primary);
  background: rgba(0,158,226,.06);
}

.artikel-card:active { transform: scale(0.99); }

.artikel-card__check { flex-shrink: 0; }

.artikel-card__info {
  flex: 1;
  min-width: 0;
}

.artikel-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.artikel-card__meta {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}

.artikel-card__preis {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stat boxes (Admin) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-box .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-box .stat-label { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* Responsiveness for larger screens */
@media (min-width: 480px) {
  .page { padding: 24px; }
  .btn--big { height: 80px; }
}

/* ── Bereich-Auswahl (Step 2: Druck / Scan / Fax / Kopieren) ──── */

.bereich-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.bereich-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  background: #fff;
  border: 2px solid #e8ecf0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  text-align: center;
  min-height: 110px;
  width: 100%;
}

.bereich-btn:hover {
  border-color: var(--primary, #009EE2);
  box-shadow: 0 2px 8px rgba(0,158,226,.15);
}

.bereich-btn:active {
  transform: scale(.97);
}

.bereich-icon {
  font-size: 32px;
  line-height: 1;
}

.bereich-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a2332);
}

.bereich-sub {
  font-size: 11px;
  color: var(--muted, #8a9ab0);
  line-height: 1.3;
}

/* ── Unterkategorie-Überschrift (Step 3) ─────────────────────── */

#unterkat-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text, #1a2332);
}

/* ── Unterkategorie cat-btn (Row-Style für Step 3) ───────────── */

.cat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #e8ecf0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #1a2332);
  transition: border-color .15s, background .15s;
  text-align: left;
  margin-bottom: 8px;
}

.cat-btn:hover {
  border-color: var(--primary, #009EE2);
  background: rgba(0,158,226,.04);
}

.cat-btn.selected {
  border-color: var(--primary, #009EE2);
  background: rgba(0,158,226,.08);
  font-weight: 600;
}

.cat-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Baum-Bild responsive ────────────────────────────────────── */

#baum-image {
  width: 100%;
  max-width: 380px;
  border-radius: 10px;
  margin: 12px auto;
  display: block;
  object-fit: contain;
}

/* ── CMYK Konfetti (Gelöst-Screen) ───────────────────────────── */

#confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  top: 0;
  animation: confetti-fall linear forwards;
}

/* Gelöst-Emoji Bounce */
.geloest-emoji {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  display: block;
  animation: geloest-bounce 0.6s ease-out;
}

@keyframes geloest-bounce {
  0%   { transform: scale(0);   }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1);   }
}