/* components/doc-closer/doc-closer.css */
/* ==========================================================================
   PeMiGuard - Munkalap Lezáró, Aláíró és Bizonylatkezelő Modul Stílusai
   ========================================================================== */

/* 1. Aláíró Vászon (Canvas) beállításai */
.signature-canvas-wrapper {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.75rem; /* xl */
  overflow: hidden;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

#signature-pad {
  width: 100%;
  height: 12rem; /* Elég magas a kényelmes aláíráshoz (kb. 192px) */
  display: block;
  cursor: crosshair;
  /* KULCSFONTOSSÁGÚ: Megakadályozza, hogy mobilon rajzolás közben görgessen az oldal! */
  touch-action: none; 
}

/* Törlés gomb interakció */
#btn-clear-signature {
  transition: color 0.2s ease-in-out;
}
#btn-clear-signature:active {
  transform: scale(0.95);
}

/* 2. Értesítő és Státusz sáv */
#closer-generation-status {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Bizonylat gombok konténerének állapota */
.bizonylat-sor {
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.bizonylat-sor.opacity-50 {
  opacity: 0.5;
  pointer-events: none; /* Inaktív állapotban nem kattintható */
  filter: grayscale(100%); /* Vizuálisan is inaktívvá tesszük */
}

/* 4. Statisztika / Összegző dobozok */
#closer-summary-box .grid > div {
  transition: transform 0.2s ease;
}
#closer-summary-box .grid > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 5. Reszponzív finomhangolás */
@media (max-width: 640px) { /* sm breakpoint alatt (mobilok) */
  .signature-canvas-wrapper {
      border-radius: 0.5rem;
  }
  #signature-pad {
      height: 10rem;
  }
  .bizonylat-sor {
      flex-direction: column;
      align-items: stretch;
  }
  .bizonylat-sor > div {
      width: 100%;
      display: flex;
      gap: 0.5rem;
  }
  .bizonylat-sor > div > button {
      flex: 1;
      justify-content: center;
  }
}