/* GŁÓWNY WRAPPER */

.buttons{

  display:flex;

  gap:12px;

  margin-top:18px;
}

/* GŁÓWNE PRZYCISKI */

.action-btn{

  flex:1;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  border:none;

  background:var(--primary);

  color:white;

  padding:16px;

  border-radius:18px;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s;

  box-shadow:
    0 10px 20px rgba(17,24,39,0.14);
}

/* HOVER */

.action-btn:hover{

  transform:translateY(-2px);

  box-shadow:
    0 14px 26px rgba(17,24,39,0.18);
}

/* ACTIVE */

.action-btn:active{

  transform:scale(0.97);
}

/* IKONY */

.action-btn i{

  font-size:18px;
}

/* PDF */

.action-btn:nth-child(2){

  background:#dc2626;
}

/* EXCEL */

.action-btn:nth-child(1){

  background:#15803d;
}

/* SMALL BUTTONS */

.small-btn{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:6px;

  border:none;

  padding:10px 14px;

  border-radius:14px;

  cursor:pointer;

  font-size:14px;

  font-weight:700;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

/* ACTIVE */

.small-btn:active{

  transform:scale(0.95);
}

/* EDYCJA */

.edit-btn{

  background:#2563eb;

  color:white;
}

/* USUWANIE */

.delete-btn{

  background:#dc2626;

  color:white;
}

/* SAVE */

.save-btn{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  position:sticky;

  bottom:0;

  width:100%;

  border:none;

  background:linear-gradient(
    135deg,
    #111827,
    #1f2937
  );

  color:white;

  padding:18px;

  border-radius:20px;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  margin-top:14px;

  box-shadow:
    0 14px 28px rgba(17,24,39,0.22);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* HOVER */

.save-btn:hover{

  box-shadow:
    0 18px 34px rgba(17,24,39,0.28);
}

/* ACTIVE */

.save-btn:active{

  transform:scale(0.98);
}

/* RESPONSYWNOŚĆ */

@media (max-width:600px){

  .buttons{

    flex-direction:column;
  }

  .action-btn{

    width:100%;
  }
}